Merge pull request #77 from drashmk/mobile-scroll

[#76] Fixes numbers don't fit on screen anymore in mobile view
konradkalemba · May 17, 2020 · 3b43676 · 3b43676 · vercel · May 17, 2020
2 parents ed91148 + 1bf0ac6
commit 3b43676
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/Layout/Mobile.jsx b/src/components/Layout/Mobile.jsx
@@ -72,8 +72,7 @@ export default function Mobile() {
         <div
           className={css({
             backgroundColor: theme.colors.backgroundPrimary,
-            padding: theme.sizing.scale600,
-            paddingBottom: 0,
+            padding: `${theme.sizing.scale600} 0 0 0`,
           })}
         >
           <div
@@ -82,6 +81,7 @@ export default function Mobile() {
               flexWrap: 'nowrap',
               justifyContent: 'space-between',
               alignItems: 'center',
+              padding: `0 ${theme.sizing.scale600}`,
             })}
           >
             <HeadingSmall margin={0}>{t('coronavirusInPoland')}</HeadingSmall>
@@ -158,7 +158,10 @@ export default function Mobile() {
           <div
             className={css({
               display: 'flex',
-              justifyContent: 'space-around',
+              justifyContent: 'flex-start',
+              overflow: 'auto',
+              flex: 1,
+              padding: `0 ${theme.sizing.scale600}`,
             })}
           >
             <FlexGridItemCentered>
@@ -272,7 +275,14 @@ export default function Mobile() {
                 height: 'auto',
               })}
             >
-              <FlexGrid flexGridColumnCount={2}>
+              <FlexGrid
+                flexGridColumnCount={2}
+                className={css({
+                  margin: `0 -${theme.sizing.scale600}`,
+                  padding: `0 ${theme.sizing.scale600}`,
+                  overflowX: 'auto',
+                  flex: 1,
+                })}>
                 <FlexGridItem>
                   <Figure
                     data={hospitalizations}