Make homepage responsive

components/global-header.tsx

@@ -49,7 +49,7 @@ function DesktopMenuLinks() {
 
 function MobileMenuLinks() {
   return (
-    <Menu>
+    <Menu autoSelect={false}>
       <MenuButton
         d={['block', 'none', 'none']}
         as={HamburgerIcon}
@@ -59,9 +59,12 @@ function MobileMenuLinks() {
         cursor='pointer'
       />
       <MenuList py={'4px'} rounded='3px' minWidth='150px'>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Roadmaps</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Guides</MenuItem>
+                  color='gray.600'>Roadmaps</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Videos</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+                  color='gray.600'>Guides</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+                  color='gray.600'>Videos</MenuItem>
         <MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
       </MenuList>
     </Menu>
@@ -73,17 +76,19 @@ export function GlobalHeader() {
     <Box bg='gray.900' p='20px 0'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
-          <Link w='100%'
+          <Box>
-                d='flex'
+            <Link w='100%'
-                href='/'
+                  d='flex'
-                alignItems='center'
+                  href='/'
-                color='white'
+                  alignItems='center'
-                fontWeight={600}
+                  color='white'
-                _hover={{ textDecoration: 'none' }}
+                  fontWeight={600}
-                fontSize='18px'>
+                  _hover={{ textDecoration: 'none' }}
-            <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
+                  fontSize='18px'>
-            <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
+              <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
-          </Link>
+              <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
+            </Link>
+          </Box>
           <DesktopMenuLinks />
           <MobileMenuLinks />
         </Flex>

components/links-list-item.tsx

@@ -16,9 +16,10 @@ export function LinksListItem(props: LinksListItemProps) {
       fontSize='15px'
       py='9px'
       d='flex'
+      flexDirection={['column', 'row', 'row']}
       fontWeight={500}
       color='gray.600'
-      alignItems='center'
+      alignItems={['flex-start', 'center']}
       justifyContent={'space-between'}
       _hover={{
         textDecoration: 'none',
@@ -27,14 +28,16 @@ export function LinksListItem(props: LinksListItemProps) {
           transform: 'translateX(10px)'
         }
       }}
+      isTruncated
+      maxWidth='100%'
     >
       <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
         {icon}
-        <Text as='span'>{title}</Text>
+        <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
         <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
       </Flex>
-      <Text as='span' fontSize='13px' color='gray.500'>{subtitle}</Text>
+      <Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text>
     </Link>
   );
 }

components/updates-banner.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react';
 
 export function UpdatesBanner() {
   return (
@@ -8,8 +8,8 @@ export function UpdatesBanner() {
         <Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new
           guides, videos and roadmaps in your inbox.</Text>
 
-        <Stack isInline spacing='15px'>
+        <Flex flexDirection={['column', 'column', 'row']}>
-          <Box>
+          <Box mr='20px' mb={['15px', '15px', 0]}>
             <Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
               Subscribe to Updates
             </Button>
@@ -21,7 +21,7 @@ export function UpdatesBanner() {
                                                                                                              fontWeight={600}>5$
               per month</Text></Text>
           </Box>
-        </Stack>
+        </Flex>
       </Container>
     </Box>
   );