Repository: zeit-ui/react
Pull request #205 (2020-05-13 15:48:44)

fix(page): fix page width too large at md breakpoint
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information





Patch:
diff --git a/components/page/page.tsx b/components/page/page.tsx
index 4263c2c..0027776 100644
--- a/components/page/page.tsx
+++ b/components/page/page.tsx
@@ -89,16 +89,10 @@ const Page: React.FC<React.PropsWithChildren<NoteProps>> = ({
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 ${theme.layout.gap};
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       `}</style>
     </section>
   )
diff --git a/lib/components/displays/mock-page.tsx b/lib/components/displays/mock-page.tsx
index 584d4d2..4c9453f 100644
--- a/lib/components/displays/mock-page.tsx
+++ b/lib/components/displays/mock-page.tsx
@@ -31,7 +31,7 @@ const MockPage: React.FC<React.PropsWithChildren<Props>> = ({
         section {
           position: fixed;
           width: 100vw;
-          height: 100vw;
+          height: 100vh;
           background-color: ${theme.palette.background};
           z-index: 5000;
           top: -5000px;
@@ -42,6 +42,7 @@ const MockPage: React.FC<React.PropsWithChildren<Props>> = ({
         .active {
           top: 0;
           left: 0;
+          bottom: 0;
           display: block;
         }
       `}</style>


Test patch:
diff --git a/components/page/__tests__/__snapshots__/child.test.tsx.snap b/components/page/__tests__/__snapshots__/child.test.tsx.snap
index 75bf6ab..efd93c7 100644
--- a/components/page/__tests__/__snapshots__/child.test.tsx.snap
+++ b/components/page/__tests__/__snapshots__/child.test.tsx.snap
@@ -28,15 +28,9 @@ exports[`PageChild should work with child component 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section>"
 `;
diff --git a/components/page/__tests__/__snapshots__/index.test.tsx.snap b/components/page/__tests__/__snapshots__/index.test.tsx.snap
index bfd92ff..1d4c72c 100644
--- a/components/page/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/page/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,16 +12,10 @@ exports[`Page should render correctly 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section>"
 `;
 
@@ -37,16 +31,10 @@ exports[`Page should work with different size 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section><section><main class=\\"\\"><style>
         main {
           width: 100%;
@@ -58,16 +46,10 @@ exports[`Page should work with different size 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section><section><main class=\\"\\"><style>
         main {
           width: 100%;
@@ -79,16 +61,10 @@ exports[`Page should work with different size 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section><section><main class=\\"\\"><style>
         main {
           width: 100%;
@@ -100,15 +76,9 @@ exports[`Page should work with different size 1`] = `
           max-width: 100vw;
           min-height: 100vh;
           margin: 0 auto;
+          padding: 0 16pt;
           box-sizing: border-box;
           position: relative;
         }
-
-        @media only screen and (max-width: 650px) {
-          section {
-            max-width: 90vw;
-            min-height: -webkit-fill-available;
-          }
-        }
       </style></section></div>"
 `;