diff --git a/components/layout.js b/components/layout.js
index 89d5a3a..d7b3fa4 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -12,8 +12,14 @@ export class Layout extends HTMLElement {
       :host {
         display: flex;
         flex-direction: column;
+        align-items: stretch;
+        height: 100vh;
+        min-height: 100vh;
+        max-height: 100vh;
+        overflow-y: hidden;
+        position: relative;
       }
-      .m-page {
+      m-page {
         flex-grow: 1;
       }
     `
@@ -45,11 +51,11 @@ export class Layout extends HTMLElement {
 
   get path() {
     const hash = (
-      window.location.hash.slice(1) || '/'
+      location.hash.slice(1) || '/'
     )
     return hash.startsWith('/') ? new URL(
       hash,
-      window.location
+      location.href
     ).pathname : hash
   }
 
diff --git a/components/page.js b/components/page.js
index d777fc9..1db0823 100644
--- a/components/page.js
+++ b/components/page.js
@@ -42,9 +42,8 @@ addEventListener('message', event => {
 export class Page extends HTMLElement {
   constructor() {
     super()
-    const shadow = this.attachShadow({mode: 'open'})
+    this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
-    //this.editing = false
     this.textArea = document.createElement('textarea')
     this.textArea.addEventListener('input', e => {
       this.body = e.target.value
@@ -52,7 +51,7 @@ export class Page extends HTMLElement {
     const div = document.createElement('div')
     div.classList.add('twrap')
     div.appendChild(this.textArea)
-    shadow.appendChild(div)
+    this.shadowRoot.appendChild(div)
   }
 
   connectedCallback() {
@@ -60,8 +59,10 @@ export class Page extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       :host {
-        overflow-y: auto;
-        display: flex;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        grid-template-areas: "main";
         flex-direction: column;
         align-items: stretch;
       }
@@ -70,16 +71,22 @@ export class Page extends HTMLElement {
         display: flex;
         align-items: stretch;
         flex-direction: column;
+        grid-area: main;
       }
       textarea {
         padding: 5px 10px;
         font-size: 0.90em;
-        height: 50vh;
+        height: 100%;
+      }
+      textarea:focus {
+        height: 45vh;
       }
       iframe {
         border: none;
+        margin: 0;
+        padding: 0;
+        grid-area: main;
         width: 100%;
-        height: 90dvh;
       }
       :host(.editing) iframe {
         display: none;
@@ -94,8 +101,6 @@ export class Page extends HTMLElement {
   }
 
   initFrame() {
-    const wrap = document.createElement('div')
-    this.shadowRoot.appendChild(wrap)
     const frame = document.createElement('iframe')
     if (this.csp !== undefined) {
       frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
@@ -112,8 +117,8 @@ export class Page extends HTMLElement {
     frame.addEventListener('load', () => {
       this.display(this.body)
     })
-    wrap.appendChild(frame)
     this.frame = frame
+    this.shadowRoot.append(frame)
     this.textArea.addEventListener('blur', e => {
       this.display(e.target.value)
     })
diff --git a/index.html b/index.html
index ceeeffc..ce01df5 100644
--- a/index.html
+++ b/index.html
@@ -4,20 +4,16 @@
     <title>macchiato.dev</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <style type="text/css">
-      html, body {
-        padding: 0;
-      }
-      html {
-        box-sizing: border-box;
-      }
-      body {
-        height: 100dvh;
-        max-width: 800px;
-        margin: 0 auto;
-      }
-      *, *:before, *:after {
-        box-sizing: inherit;
-      }
+html, body {
+  margin: 0;
+  padding: 0;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
     </style>
   </head>
   <body>
diff --git a/sw.js b/sw.js
index 5be9c44..79bdca1 100644
--- a/sw.js
+++ b/sw.js
@@ -11,7 +11,7 @@ async function initCache() {
     '/components/dialog.js',
     '/forms/button-group.js',
     '/menu/dropdown.js',
-  ]) //1
+  ]) //2
 }
 
 self.addEventListener("install", event => {