Fix responsiveness issues

components/global-header.tsx

@@ -87,7 +87,7 @@ function MobileMenuLinks() {
 
 export function GlobalHeader() {
   return (
-    <Box bg='gray.900' p='20px 0'>
+    <Box bg='gray.900' p='58px 0 20px'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/page-header.tsx

@@ -16,13 +16,13 @@ export function PageHeader(props: PageHeaderProps) {
         <Heading
           as='h1'
           color='black'
-          fontSize={['33px', '33px', '40px']}
+          fontSize={['28px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
         >
           {title}
         </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
+        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (

components/sticky-banner.tsx

@@ -8,10 +8,17 @@ export function StickyBanner() {
           href={siteConfig.url.youtube}
           bg={'yellow.300'}
           color='gray.900'
+      // bg={'teal.900'}
+      // color='gray.300'
           alignItems='center'
+          position='fixed'
+          left={0}
+          right={0}
+          zIndex={999}
           justifyContent='center'
-          py='7px'
-          _hover={{ textDecoration: 'none', bg: 'yellow.400', }}
+          py='8px'
+          _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
+      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />

pages/[roadmap]/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
+import { Box, Button,  Text, Container, Link, Stack } from '@chakra-ui/react';
 import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
@@ -64,10 +64,9 @@ export default function Roadmap(props: RoadmapProps) {
           subtitle={roadmap.description}
         >
           <Stack mt='20px' isInline>
-            <Button d={['none', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
-                    leftIcon={<ArrowBackIcon />}
+            <Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
                     colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
-              All Roadmaps
+              &larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
             </Button>
 
             {roadmap.pdfUrl && (
@@ -81,7 +80,7 @@ export default function Roadmap(props: RoadmapProps) {
                       colorScheme='yellow'
                       variant='solid'
                       _hover={{ textDecoration: 'none' }}>
-                Download PDF
+                Download
               </Button>
             )}
             <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}