fix: Minor design fix (#463)

* Fix network selector responsiveness * Fix lint error * Add padding in network selector * Fix H1 desktop line height * Fix H1 desktop padding top
safe-global · May 7, 2024 · 4a1cdc5 · 4a1cdc5
1 parent 7744125
commit 4a1cdc5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/components/ApiReference/Network.tsx b/components/ApiReference/Network.tsx
@@ -63,7 +63,7 @@ const NetworkSwitcher: React.FC = () => {
           }}
           sx={{
             mr: 1,
-            width: ['100%', 'auto'],
+            width: ['100%', '100%', 'auto'],
             border: ({ palette }) => `1px solid ${palette.grey[700]}`
           }}
           inputProps={{
@@ -79,21 +79,42 @@ const NetworkSwitcher: React.FC = () => {
             </MenuItem>
           ))}
         </Select>
-        <Grid mr={[1, 3]} my={1} item wrap='nowrap'>
-          <Link href={network} target='_blank' rel='noopener noreferrer'>
+        <Grid
+          mr={1}
+          my={2}
+          sx={{ width: ['100%', '100%', 'auto'] }}
+          item
+          wrap='nowrap'
+        >
+          <Link
+            href={network}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
             <Typography
               variant='caption'
               mx={1}
-              my={2}
-              textOverflow='ellipsis'
               noWrap
+              sx={{
+                whiteSpace: 'nowrap',
+                overflowX: 'scroll',
+                textOverflow: 'initial',
+                display: { xs: 'inline-block', md: 'inline' },
+                height: '20px',
+                width: ['calc(100% - 48px)', 'calc(100% - 48px)', 'auto']
+              }}
             >
               <strong style={{ color: 'white' }}>Base URL:</strong> {network}{' '}
             </Typography>
           </Link>
           <CopyToClipboard getValue={() => `${network}`} />
         </Grid>
-        <Grid sx={{ width: ['100%', 'auto'] }} item justifyContent='flex-end'>
+        <Grid
+          sx={{ width: ['100%', '100%', 'auto'] }}
+          item
+          justifyContent='flex-end'
+          mr={1}
+        >
           <Link
             href={`${network}?format=openapi`}
             target='_blank'
@@ -102,7 +123,7 @@ const NetworkSwitcher: React.FC = () => {
             <Button
               variant='contained'
               color='primary'
-              sx={{ width: ['100%', 'auto'] }}
+              sx={{ width: ['100%', '100%', 'auto'] }}
               endIcon={<GetAppIcon />}
             >
               Download Specs

diff --git a/styles/theme.ts b/styles/theme.ts
@@ -67,10 +67,10 @@ export const theme = createTheme({
       fontSize: '56px',
       lineHeight: '60px',
       fontWeight: 700,
-
+      paddingTop: '16px',
       '@media (min-width:600px)': {
         fontSize: '36px',
-        lineHeight: '82px'
+        lineHeight: '48px'
       }
     },
     h2: {