Adjust console font resize interface for easier access, and make min-allowed font size to 8

ui/common.css

@@ -285,12 +285,18 @@ body {
   box-shadow: 1px 1px 0 2px #0003;
 }
 
-.icon.icon-keyboardkey2 {
+.icon.icon-iconed-bottom1 {
-  background: #fff;
-  color: #999;
   padding: 4px 6px;
   display: inline-block;
   border-radius: 3px;
+  text-align: center;
+}
+.icon.icon-iconed-bottom1 > i {
+  font-style: normal;
+  display: block;
+  margin: 3px;
+  font-size: 2em;
+  font-weight: normal;
 }
 
 /* Windows */

ui/widgets/screen_console.css

@@ -57,6 +57,28 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group.console-toolbar-group-left {
+  border-right: 1px solid #0001;
+  margin-right: -1px;
+  float: left;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group.console-toolbar-group-main {
+  border-left: 1px solid #0001;
+  overflow: auto;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item {
   padding: 15px;
   float: left;
@@ -67,6 +89,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-title {
   font-size: 0.7em;
@@ -81,6 +104,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item {
   display: block;
@@ -96,6 +120,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item:active {
   background: #fff3;
@@ -106,6 +131,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon {
@@ -119,6 +145,20 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
+  > .console-toolbar-item
+  .tb-item
+  > .tb-key-icon.tb-key-resize-icon {
+  display: block;
+  padding: 5px;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon:first-child {
@@ -130,6 +170,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon:last-child {
@@ -141,6 +182,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item:active
   .tb-key-icon {

ui/widgets/screen_console.vue

@@ -47,23 +47,36 @@
     >
       <h2 style="display:none;">Tool bar</h2>
 
+      <div class="console-toolbar-group console-toolbar-group-left">
         <div class="console-toolbar-item">
           <h3 class="tb-title">Text size</h3>
 
-        <ul class="hlst lst-nostyle">
+          <ul class="lst-nostyle">
             <li>
               <a class="tb-item" href="javascript:;" @click="fontSizeUp">
-              <span class="tb-key-icon icon icon-keyboardkey2">Increase +</span>
+                <span
+                  class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
+                >
+                  <i>+</i>
+                  Increase
+                </span>
               </a>
             </li>
             <li>
               <a class="tb-item" href="javascript:;" @click="fontSizeDown">
-              <span class="tb-key-icon icon icon-keyboardkey2">Decrease -</span>
+                <span
+                  class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
+                >
+                  <i>-</i>
+                  Decrease
+                </span>
               </a>
             </li>
           </ul>
         </div>
+      </div>
 
+      <div class="console-toolbar-group console-toolbar-group-main">
         <div
           v-for="(keyType, keyTypeIdx) in screenKeys"
           :key="keyTypeIdx"
@@ -84,6 +97,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -107,7 +121,7 @@ const termTypeFaceLoadError =
   termFallbackTypeFace +
   '" instead until the remote font is loaded';
 const termDefaultFontSize = 16;
-const termMinFontSize = 14;
+const termMinFontSize = 8;
 const termMaxFontSize = 36;
 
 class Term {
@@ -223,14 +237,6 @@ class Term {
     });
   }
 
-  setFont(value) {
-    if (this.closed) {
-      return;
-    }
-
-    this.term.setOption("fontFamily", value);
-  }
-
   init(root, callbacks) {
     if (this.closed) {
       return;
@@ -322,6 +328,15 @@ class Term {
     }
   }
 
+  setFont(value) {
+    if (this.closed) {
+      return;
+    }
+
+    this.term.setOption("fontFamily", value);
+    this.refit();
+  }
+
   fontSizeUp() {
     if (this.closed) {
       return;