Fixed screen switching

ui/widgets/screen_console.css

@@ -207,9 +207,13 @@
   > .screen-console
   > .console-console
   > .console-loading {
-  text-align: center;
-  font-size: 1em;
-  font-weight: lighter;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 #home-content
@@ -218,6 +222,22 @@
   > .screen-console
   > .console-console
   > .console-loading
+  > .console-loading-frame {
+  text-align: center;
+  font-size: 1em;
+  font-weight: lighter;
+  padding: 20px;
+  margin: 10px auto;
+  flex: auto;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-console
+  > .console-loading
+  > .console-loading-frame
   > .console-loading-icon {
   background: url(./busy.svg) 50% no-repeat;
   width: 100%;

ui/widgets/screen_console.vue

@@ -26,9 +26,11 @@
       <h2 style="display: none;">Console</h2>
 
       <div class="console-loading">
-        <div class="console-loading-icon"></div>
-        <div class="console-loading-message">
-          Initializing console ...
+        <div class="console-loading-frame">
+          <div class="console-loading-icon"></div>
+          <div class="console-loading-message">
+            Initializing console ...
+          </div>
         </div>
       </div>
     </div>
@@ -457,8 +459,8 @@ export default {
     };
   },
   watch: {
-    active() {
-      this.triggerActive();
+    active(newVal, oldVal) {
+      this.triggerActive(newVal);
     },
     change: {
       handler() {
@@ -553,8 +555,8 @@ export default {
         callbacks.warn(termTypeFaceLoadError, true);
       });
     },
-    triggerActive() {
-      this.active ? this.activate() : this.deactivate();
+    triggerActive(active) {
+      active ? this.activate() : this.deactivate();
     },
     async init() {
       let self = this;
@@ -594,7 +596,7 @@ export default {
         return;
       }
 
-      self.triggerActive();
+      self.triggerActive(this.active);
       self.runRunner();
     },
     async deinit() {
@@ -614,6 +616,7 @@ export default {
     },
     activate() {
       this.term.focus();
+      this.fit();
     },
     async deactivate() {
       this.term.blur();

ui/widgets/screens.css

@@ -32,6 +32,10 @@
   flex: auto;
 }
 
+#home-content > .screen.screen-inactive {
+  flex: 0 0 0;
+}
+
 #home-content > .screen > .screen-error {
   display: block;
   padding: 10px;

ui/widgets/screens.vue

@@ -24,7 +24,7 @@
     <div
       v-for="(screenInfo, idx) in screens"
       :key="screenInfo.id"
-      :style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
+      :class="{ 'screen-inactive': screen !== idx }"
       class="screen"
     >
       <h1 style="display: none;">Main Interface</h1>