Further resolve the Window resizing problem. Should work better now

ui/widgets/screen_console.css

@@ -37,6 +37,7 @@
 
 #home-content > .screen > .screen-screen > .screen-console {
   position: relative;
+  min-height: 1px;
 }
 
 #home-content > .screen > .screen-screen > .screen-console > .console-toolbar {
@@ -50,6 +51,7 @@
   background: #222;
   color: #fff;
   box-shadow: 0 0 5px #0006;
+  z-index: 1;
 }
 
 #home-content
@@ -190,11 +192,13 @@
 }
 
 #home-content > .screen > .screen-screen > .screen-console > .console-console {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  justify-items: center;
   color: #fff;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  z-index: 0;
 }
 
 #home-content

ui/widgets/screen_console.vue

@@ -21,7 +21,6 @@
   <div class="screen-console">
     <div
       class="console-console"
-      style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; z-index: 0; position: absolute; overflow: hidden"
       :style="'font-family: ' + typeface + ', inherit'"
     >
       <h2 style="display: none;">Console</h2>
@@ -233,7 +232,6 @@ class Term {
           rows: dim.rows,
           cols: dim.cols,
         });
-
       }, resizeDelayInterval);
     });
   }
@@ -280,16 +278,6 @@ class Term {
       }
     });
 
-    this.term.element.addEventListener("click", () => {
-      if (this.closed) {
-        return;
-      }
-
-      this.term.textarea.blur();
-      this.term.textarea.click();
-      this.term.textarea.focus();
-    });
-
     this.refit();
   }
 
@@ -451,6 +439,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    viewPort: {
+      type: Object,
+      default: () => null,
+    },
   },
   data() {
     return {
@@ -459,7 +451,6 @@ export default {
       typeface: termTypeFace,
       runner: null,
       eventHandlers: {
-        resize: null,
         keydown: null,
         keyup: null,
       },
@@ -479,6 +470,16 @@ export default {
       },
       deep: true,
     },
+    viewPort: {
+      handler() {
+        if (!this.active) {
+          return;
+        }
+
+        this.fit();
+      },
+      deep: true,
+    },
   },
   async mounted() {
     await this.init();
@@ -559,45 +560,42 @@ export default {
       let self = this;
 
       self.eventHandlers = {
-	resize: () => self.fit(),
-	keyup: e => self.localKeypress(e),
-	keydown: e => self.localKeypress(e),
+        keyup: (e) => self.localKeypress(e),
+        keydown: (e) => self.localKeypress(e),
       };
 
       await self.openTerm(
-	self.$el.getElementsByClassName("console-console")[0],
-	{
-	  focus(e) {
-	    document.addEventListener("keyup", self.eventHandlers.keyup);
-	    document.addEventListener("keydown", self.eventHandlers.keydown);
-	  },
-	  blur(e) {
-	    document.removeEventListener("keyup", self.eventHandlers.keyup);
-	    document.removeEventListener("keydown", self.eventHandlers.keydown);
-	  },
-	  warn(msg, toDismiss) {
-	    self.$emit("warning", {
-	      text: msg,
-	      toDismiss: toDismiss,
-	    });
-	  },
-	  info(msg, toDismiss) {
-	    self.$emit("info", {
-	      text: msg,
-	      toDismiss: toDismiss,
-	    });
-	  },
-	}
+        self.$el.getElementsByClassName("console-console")[0],
+        {
+          focus(e) {
+            document.addEventListener("keyup", self.eventHandlers.keyup);
+            document.addEventListener("keydown", self.eventHandlers.keydown);
+          },
+          blur(e) {
+            document.removeEventListener("keyup", self.eventHandlers.keyup);
+            document.removeEventListener("keydown", self.eventHandlers.keydown);
+          },
+          warn(msg, toDismiss) {
+            self.$emit("warning", {
+              text: msg,
+              toDismiss: toDismiss,
+            });
+          },
+          info(msg, toDismiss) {
+            self.$emit("info", {
+              text: msg,
+              toDismiss: toDismiss,
+            });
+          },
+        }
       );
 
       if (self.term.destroyed()) {
-	return;
+        return;
       }
 
       self.triggerActive();
       self.runRunner();
-
-      self.$nextTick(() => self.eventHandlers.resize());
     },
     async deinit() {
       await this.closeRunner();
@@ -615,12 +613,9 @@ export default {
       e.preventDefault();
     },
     activate() {
-      this.eventHandlers.resize();
       this.term.focus();
-      window.addEventListener("resize", this.eventHandlers.resize);
     },
     async deactivate() {
-      window.removeEventListener("resize", this.eventHandlers.resize);
       this.term.blur();
     },
     runRunner() {

ui/widgets/screens.css

@@ -19,11 +19,17 @@
 
 @charset "utf-8";
 
+#home-content.active {
+  min-height: 0;
+}
+
 #home-content > .screen {
   display: flex;
-  justify-content: top;
+  justify-content: start;
   flex-direction: column;
   font-size: 1em;
+  overflow: hidden;
+  flex: auto;
 }
 
 #home-content > .screen > .screen-error {
@@ -49,4 +55,17 @@
 
 #home-content > .screen > .screen-screen {
   flex: auto;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  min-height: 0;
+}
+
+#home-content > .screen > .screen-screen > .screen-content {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
 }

ui/widgets/screens.vue

@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <main style="position: relative">
+  <main :class="{ active: screens.length > 0 }">
     <slot v-if="screens.length <= 0"></slot>
 
     <div
@@ -26,9 +26,8 @@
       :key="screenInfo.id"
       :style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
       class="screen"
-      style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; overflow: auto; position: absolute;"
     >
-      <h1 style="display:none;">Main Interface</h1>
+      <h1 style="display: none;">Main Interface</h1>
 
       <div
         v-if="screenInfo.indicator.message.length > 0"
@@ -38,15 +37,16 @@
         {{ screenInfo.indicator.message }}
       </div>
 
-      <div class="screen-screen" style="position: relative">
+      <div class="screen-screen">
         <component
           :is="getComponent(screenInfo.ui)"
           :active="screen === idx"
           :control="screenInfo.control"
           :change="screenInfo.indicator"
           :toolbar="screenInfo.toolbar"
+          :view-port="viewPort"
           :style="'background-color: ' + screenInfo.control.activeColor()"
-          style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
+          class="screen-content"
           @stopped="stopped(idx, $event)"
           @warning="warning(idx, $event)"
           @info="info(idx, $event)"
@@ -64,17 +64,21 @@ import "./screens.css";
 
 export default {
   components: {
-    ConsoleScreen
+    ConsoleScreen,
   },
   props: {
     screen: {
       type: Number,
-      default: 0
+      default: 0,
     },
     screens: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
+    viewPort: {
+      type: Object,
+      default: () => [],
+    },
   },
   methods: {
     getComponent(ui) {
@@ -97,7 +101,7 @@ export default {
     },
     updated(index) {
       this.$emit("updated", index);
-    }
-  }
+    },
+  },
 };
 </script>