From 865802bdffa5fb832cc0b7d511505f88782ee271 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 24 Nov 2022 02:29:03 +0100
Subject: [PATCH] Limit SVG width on mobile [Fixes #38] (#41)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix horizontal scroll on mobile downloads

* padding change requests

* fix: DownloadsHero padding

* fix: border color

Co-authored-by: Corwin Smith <cssmittys@gmail.com>
Co-authored-by: Nicolás Quiroz <nh.quiroz@gmail.com>
---
 src/components/UI/downloads/DownloadsHero.tsx | 25 ++++++++-----------
 .../UI/downloads/DownloadsSection.tsx         |  2 +-
 .../UI/downloads/SpecificVersionsSection.tsx  |  9 ++-----
 3 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 610e5aa2a4..4d53876c27 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Center, Grid, HStack, Image, Link, Stack,Text } from '@chakra-ui/react';
+import { Box, Button, Center, Grid, HStack, Image, Link, Stack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
@@ -43,7 +43,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           mb={4}
           templateColumns={{ base: 'repeat(1, 1fr)', md: '1fr 300px', lg: '1fr' }}
           gap={4}
-          p={4}
+          py={4}
         >
           <Stack>
             <Box as='h1' textStyle='h1'>
@@ -66,20 +66,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
             </Text>
           </Stack>
 
-          <Stack
-            py={{ base: 0 }}
-            px={{ base: 8 }}
+          <Center
+            p={{ base: 0, md: 8 }}
             flex={{ base: 'none' }}
             display={{ base: 'block', lg: 'none' }}
             order={{ base: -1, md: 1 }}
           >
-            <Center>
-              <GopherDownloads aria-label='Gopher plugged in' w={{ md: 96 }} />
-            </Center>
-          </Stack>
+            <GopherDownloads aria-label='Gopher plugged in' w={{ base: '100%' }} />
+          </Center>
         </Grid>
 
-        <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4} mb={4}>
+        <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
             return (
@@ -87,12 +84,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
                 <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
-                      <Svg aria-label={ariaLabel} maxH="44px" />
+                      <Svg aria-label={ariaLabel} maxH='44px' />
                     </Stack>
                     <Box>
-                      <Text textStyle='downloads-button-label'>
-                        For {name}
-                      </Text>
+                      <Text textStyle='downloads-button-label'>For {name}</Text>
                       <Text textStyle='downloads-button-sublabel'>geth {currentBuildVersion}</Text>
                     </Box>
                   </HStack>
@@ -102,7 +97,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           })}
         </Grid>
 
-        <Box textAlign={'center'}>
+        <Box textAlign={'center'} pt={1} pb={2}>
           <Link href={releaseNotesURL} isExternal variant='light'>
             Release notes for {currentBuild}
           </Link>
diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
index dfdb760029..d1b7f92d41 100644
--- a/src/components/UI/downloads/DownloadsSection.tsx
+++ b/src/components/UI/downloads/DownloadsSection.tsx
@@ -44,7 +44,7 @@ export const DownloadsSection: FC<Props> = ({
             p={4}
             borderLeft={{ base: 'none', md: '2px' }}
             borderTop={{ base: '2px', md: 'none' }}
-            borderColor='primary'
+            borderColor='primary !important'
           >
             {sectionDescription}
           </Center>
diff --git a/src/components/UI/downloads/SpecificVersionsSection.tsx b/src/components/UI/downloads/SpecificVersionsSection.tsx
index 340f6f6817..2909379d63 100644
--- a/src/components/UI/downloads/SpecificVersionsSection.tsx
+++ b/src/components/UI/downloads/SpecificVersionsSection.tsx
@@ -20,18 +20,13 @@ export const SpecificVersionsSection: FC<Props> = ({ children }) => {
         justifyContent='center'
         borderBottom={{ base: '2px', md: 'none' }}
         borderRight={{ base: 'none', md: '2px' }}
-        borderColor='primary'
+        borderColor='primary !important'
         flex='none'
       >
         <GopherHomeLinks />
       </Flex>
       <Flex flexDir='column'>
-        <Stack
-          p={4}
-          borderBottom='2px'
-          borderColor='primary'
-          sx={{ mt: '0 !important' }}
-        >
+        <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
           <Box as='h2' textStyle='h2'>
             Specific Versions
           </Box>