change layout

ui/snippets/footer/Footer.tsx

-import { Box, Grid, Flex, Text, Stack, Link, VStack, Skeleton } from '@chakra-ui/react';
+import { Box, Grid, Flex, Text, Link, VStack, Skeleton } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -74,8 +74,8 @@ const Footer = () => {
     });
 
   return (
-    <Stack direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} gap={{ base: 6, lg: 12 }} borderTop="1px solid" borderColor="divider">
-      <Box flexGrow="1" mb={{ base: 2, lg: 0 }}>
+    <Flex direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} borderTop="1px solid" borderColor="divider">
+      <Box flexGrow="1" mb={{ base: 6, lg: 12 }}>
         <Flex>
           <ColorModeToggler/>
           <NetworkAddToWallet ml={ 8 }/>
@@ -98,11 +98,12 @@ const Footer = () => {
           </Text>
         ) }
       </Box>
-      <Box minW={{ base: 'auto', lg: appConfig.footerLinks ? '160px' : 'auto' }}>
+      <Grid gap={{ base: 6, lg: 12 }} gridTemplateColumns={{ base: 'repeat(auto-fill, 160px)', lg: 'repeat(4, 160px)' }}>
+        <Box minW="160px" w={ appConfig.footerLinks ? '160px' : '100%' }>
           { appConfig.footerLinks && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> }
           <Grid
             gap={ 2 }
-          gridTemplateColumns={{ base: '160px', lg: appConfig.footerLinks ? '160px' : 'repeat(3, 160px)' }}
+            gridTemplateColumns={ appConfig.footerLinks ? '160px' : { base: 'repeat(auto-fill, 160px)', lg: 'repeat(3, 160px)' } }
             gridTemplateRows={{ base: 'auto', lg: appConfig.footerLinks ? 'auto' : 'repeat(2, auto)' }}
             gridAutoFlow={{ base: 'row', lg: appConfig.footerLinks ? 'row' : 'column' }}
             mt={{ base: 0, lg: appConfig.footerLinks ? 0 : '100px' }}
@@ -112,7 +113,7 @@ const Footer = () => {
         </Box>
         { appConfig.footerLinks && isLoading && (
           Array.from(Array(3)).map((i, index) => (
-          <Box minW={{ base: 'auto', lg: '160px' }} key={ index }>
+            <Box minW="160px" key={ index }>
               <Skeleton w="120px" h="20px" mb={ 6 }/>
               <VStack spacing={ 4 } alignItems="start" mb={ 2 }>
                 { Array.from(Array(5)).map((i, index) => <Skeleton w="160px" h="14px" key={ index }/>) }
@@ -122,7 +123,7 @@ const Footer = () => {
         ) }
         { appConfig.footerLinks && data && (
           data.slice(0, 3).map(linkGroup => (
-          <Box minW={{ base: 'auto', lg: '160px' }} key={ linkGroup.title }>
+            <Box minW="160px" key={ linkGroup.title }>
               <Text fontWeight={ 500 } mb={ 3 }>{ linkGroup.title }</Text>
               <VStack spacing={ 2 } alignItems="start">
                 { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
@@ -130,7 +131,8 @@ const Footer = () => {
             </Box>
           ))
         ) }
-    </Stack>
+      </Grid>
+    </Flex>
   );
 };
 

ui/snippets/footer/FooterLinkItem.tsx

@@ -12,7 +12,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url }: Props) => {
   const textColor = useColorModeValue('gray.600', 'gray.500');
 
   return (
-    <Link href={ url } display="flex" alignItems="center" h={ 6 } color={ textColor }>
+    <Link href={ url } display="flex" alignItems="center" h={ 6 } color={ textColor } target="_blank">
       { icon && (
         <Center minW={ 6 } mr="6px">
           <Icon boxSize={ iconSize || 5 } as={ icon }/>