fix mobile display

Author: eallend

theme/components/Drawer.ts

@@ -27,7 +27,7 @@ const baseStyleDialog = defineStyle((props) => {
     ...transitionProps,
     zIndex: 'modal',
     maxH: '100vh',
-    bg: mode('white', 'gray.900')(props),
+    bg: mode('white', '#1a1a1a')(props),
     color: 'inherit',
     boxShadow: mode('lg', 'dark-lg')(props),
   };

theme/foundations/breakpoints.ts

@@ -1,5 +1,6 @@
 const breakpoints = {
 // maybe we need them in future
+  xs: '300px',
   sm: '415px',
   //   md: '768px',
   lg: '1000px',

ui/shared/layout/components/Container.tsx

@@ -10,7 +10,7 @@ const Container = ({ children, className }: Props) => {
   return (
     <Box
       className={ className }
-      minWidth={{ base: '100vw', lg: 'fit-content' }}
+      minWidth={{ base: '100%', lg: 'fit-content' }}
       m="0 auto"
       bgColor="black"
     >

ui/snippets/footer/Footer.tsx

@@ -83,7 +83,7 @@ const Footer = () => {
                 .map(linkGroup => (
                   <Box key={ linkGroup.title }>
                     <Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton>
-                    <VStack spacing={ 1 } alignItems="start">
+                    <VStack spacing={ 1 } alignItems="start" flexDirection={{ lg: 'row', sm: 'column', xs: 'column' }}>
                       { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) }
                     </VStack>
                   </Box>
@@ -116,6 +116,7 @@ const Footer = () => {
           justifyContent={{ lg: 'flex-end' }}
           gap={ 8 }
           mt={{ base: 8, lg: 0 }}
+          flexDirection={{ lg: 'row', sm: 'column', xs: 'column' }}
         >
           { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
         </Grid>