footer layout adjustments for md screens

blockscout · Oct 23, 2023 · 4edbf1b · 4edbf1b
1 parent a2d85d0
commit 4edbf1b
Show file tree

Hide file tree

Showing 13 changed files with 16 additions and 3 deletions.
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
@@ -107,7 +107,8 @@ const Footer = () => {
   return (
     <Flex
       direction={{ base: 'column', lg: 'row' }}
-      p={{ base: 4, lg: 9 }}
+      px={{ base: 4, lg: 12 }}
+      py={{ base: 4, lg: 9 }}
       borderTop="1px solid"
       borderColor="divider"
       as="footer"
@@ -149,8 +150,20 @@ const Footer = () => {
           { config.UI.footer.links && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> }
           <Grid
             gap={ 1 }
-            gridTemplateColumns={ config.UI.footer.links ? '160px' : { base: 'repeat(auto-fill, 160px)', lg: 'repeat(4, 160px)' } }
-            gridTemplateRows={{ base: 'auto', lg: config.UI.footer.links ? 'auto' : 'repeat(2, auto)' }}
+            gridTemplateColumns={
+              config.UI.footer.links ?
+                '160px' :
+                {
+                  base: 'repeat(auto-fill, 160px)',
+                  lg: 'repeat(2, 160px)',
+                  xl: 'repeat(4, 160px)',
+                }
+            }
+            gridTemplateRows={{
+              base: 'auto',
+              lg: config.UI.footer.links ? 'auto' : 'repeat(4, auto)',
+              xl: config.UI.footer.links ? 'auto' : 'repeat(2, auto)',
+            }}
             gridAutoFlow={{ base: 'row', lg: config.UI.footer.links ? 'row' : 'column' }}
             mt={{ base: 0, lg: config.UI.footer.links ? 0 : '100px' }}
           >

diff --git a/...w.tsx_dark-color-mode_with-custom-links-2-cols-base-view-dark-mode-mobile-1.png b/...w.tsx_dark-color-mode_with-custom-links-2-cols-base-view-dark-mode-mobile-1.png
diff --git a/..._/Footer.pw.tsx_dark-color-mode_with-custom-links-4-cols-mobile-dark-mode-1.png b/..._/Footer.pw.tsx_dark-color-mode_with-custom-links-4-cols-mobile-dark-mode-1.png
diff --git a/...er.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png b/...er.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png
diff --git a/...dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/...dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
diff --git a/...Footer.pw.tsx_default_with-custom-links-2-cols-base-view-dark-mode-mobile-1.png b/...Footer.pw.tsx_default_with-custom-links-2-cols-base-view-dark-mode-mobile-1.png
diff --git a/...enshots__/Footer.pw.tsx_default_with-custom-links-4-cols-mobile-dark-mode-1.png b/...enshots__/Footer.pw.tsx_default_with-custom-links-4-cols-mobile-dark-mode-1.png
diff --git a/.../__screenshots__/Footer.pw.tsx_default_with-custom-links-4-cols-screen-xl-1.png b/.../__screenshots__/Footer.pw.tsx_default_with-custom-links-4-cols-screen-xl-1.png
diff --git a/...s__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png b/...s__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png
diff --git a/....pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/....pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png