Fix scrolling in layout

3 years ago · e562017b33
parent e79c300c7d
commit e562017b33
2 changed files with 20 additions and 14 deletions
--- a/components/layout.js
+++ b/components/layout.js
@ -13,9 +13,9 @@ export class Layout extends HTMLElement {
        display: flex;
        flex-direction: column;
        align-items: stretch;
-        height: 100vh;
-        min-height: 100vh;
-        max-height: 100vh;
+        height: 100svh;
+        min-height: 100svh;
+        max-height: 100svh;
        overflow-y: hidden;
        position: relative;
      }
--- a/components/page.js
+++ b/components/page.js
@ -12,6 +12,12 @@ const frameHtml = `<!doctype html>
 iframe {
  border: none;
  display: block;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
 }
    </style>
  </head>
@ -67,7 +73,7 @@ export class Page extends HTMLElement {
        align-items: stretch;
      }
      div.twrap {
-        padding: 5px 10px;
+        padding: 10px 10px;
        display: flex;
        align-items: stretch;
        flex-direction: column;