From a504ac8a92b56ec0d20ef99e8d78ef181549664f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Magalh=C3=A3es?= <raphael.sdm@gmail.com>
Date: Fri, 24 Apr 2020 10:20:35 -0300
Subject: [PATCH] [TSX-0010] Fix horizontal scroll on App

See https://github.com/mui-org/material-ui/issues/7466
---
 src/App.style.ts |  6 ++---
 src/App.tsx      | 62 ++++++++++++++++++++++++++++++++++--------------
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/App.style.ts b/src/App.style.ts
index 850a5c4..50ae3d1 100644
--- 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
index 6a2e8db..affd7c9 100644
--- 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>