Fixing multi-line menu items

Author: erikvansebille

src/components/desktop-nav.js

@@ -25,6 +25,8 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 fontSize={'sm'}
                 fontWeight={'bold'}
                 // eslint-disable-next-line react-hooks/rules-of-hooks
+                whiteSpace={'nowrap'}
+                flexShrink={0}
                 color={useColorModeValue('gray.600', 'gray.200')}
                 _hover={{
                   textDecoration: 'none',

src/components/mobile-nav.js

@@ -35,6 +35,7 @@ const MobileNavItem = ({ href, children, label }) => {
       >
         <Text
           fontWeight={600}
+          whiteSpace={'nowrap'}
           color={useColorModeValue('gray.600', 'gray.200')}
         >
           {label}
@@ -56,6 +57,7 @@ const MobileNavItem = ({ href, children, label }) => {
           pl={4}
           borderLeft={1}
           borderStyle={'solid'}
+          whiteSpace={'nowrap'}
           borderColor={useColorModeValue('gray.200', 'gray.700')}
           align={'start'}
         >