Remove background for dev

components/layout.js

@@ -21,7 +21,6 @@ export class Layout extends HTMLElement {
       }
       m-page {
         flex-grow: 1;
-        background: #ffb;
       }
     `
     this.shadowRoot.appendChild(style)

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: grid;
-        display: flex;
+        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)
     })