Merge pull request #205 from unix/page

fix(page): fix page width too large at md breakpoint
geist-org · May 13, 2020 · 8c20be9 · 8c20be9
2 parents da723aa + 24ce127
commit 8c20be9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 50 deletions.
diff --git 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
@@ -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>"
 `;
diff --git 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
@@ -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>