[TSX-0010] Fix horizontal scroll on App

See mui/material-ui#7466
raphael-magalhaes · Apr 24, 2020 · a504ac8 · a504ac8
1 parent 982f04d
commit a504ac8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/src/App.style.ts b/src/App.style.ts
@@ -1,9 +1,9 @@
 import { createUseStyles } from 'react-jss'
 
 export const useClasses = createUseStyles({
-    dogDetails: {
-        display: 'flex',
-        justifyContent: 'center'
+    gridContainer: {
+        // Overflow hidden reasoning: https://github.com/mui-org/material-ui/issues/7466
+        overflow: 'hidden'
     },
     left: (isMdOrLower: boolean) => ({
         display: 'flex',

diff --git a/src/App.tsx b/src/App.tsx
@@ -29,25 +29,51 @@ function App() {
                     Emit Alert
                 </button>
                 <Spacer />
-                <Grid container spacing={3}>
-                    <Grid className={styles.left} item xs={12} md={12} lg={6}>
-                        <DogBreedListContainer />
+                <div className={styles.gridContainer}>
+                    <Grid container spacing={3}>
+                        <Grid
+                            className={styles.left}
+                            item
+                            xs={12}
+                            md={12}
+                            lg={6}
+                        >
+                            <DogBreedListContainer />
+                        </Grid>
+                        <Grid
+                            className={styles.right}
+                            item
+                            xs={12}
+                            md={12}
+                            lg={6}
+                        >
+                            <DogDetails
+                                testId="app__dog-details"
+                                title="Dog"
+                                imageURL="https://via.placeholder.com/200x200?text=Dog%20Image"
+                                onBark={doBark}
+                            />
+                        </Grid>
+                        <Grid
+                            className={styles.left}
+                            item
+                            xs={12}
+                            md={12}
+                            lg={6}
+                        >
+                            <CreateBeerForm />
+                        </Grid>
+                        <Grid
+                            className={styles.right}
+                            item
+                            xs={12}
+                            md={12}
+                            lg={6}
+                        >
+                            <CreateBeerFormikForm />
+                        </Grid>
                     </Grid>
-                    <Grid className={styles.right} item xs={12} md={12} lg={6}>
-                        <DogDetails
-                            testId="app__dog-details"
-                            title="Dog"
-                            imageURL="https://via.placeholder.com/200x200?text=Dog%20Image"
-                            onBark={doBark}
-                        />
-                    </Grid>
-                    <Grid className={styles.left} item xs={12} md={12} lg={6}>
-                        <CreateBeerForm />
-                    </Grid>
-                    <Grid className={styles.right} item xs={12} md={12} lg={6}>
-                        <CreateBeerFormikForm />
-                    </Grid>
-                </Grid>
+                </div>
                 <Spacer height={3} />
             </header>
         </div>