move device info to right panel, clean up scrollbar

web/kiri/index.css

@@ -25,6 +25,7 @@
     --blue-4: rgb(221, 228, 234);
     --blue-5: rgb(240, 243, 245);
     --blue-6: rgb(247, 249, 250);
+    --scroll-bg: rgba(221, 228, 234, 0.25)
 }
 
 /* surface size configuration and font import */
@@ -38,10 +39,15 @@
     }
 }
 @media only screen and (max-width : 1200px) {
-    #top {
+    body {
         font-size: smaller;
     }
 }
+@media only screen and (max-width : 900px) {
+    body {
+        font-size: x-small;
+    }
+}
 @media only screen and (max-height : 1024px) {
     body {
         font-size: smaller;
@@ -68,6 +74,8 @@ html, body {
     position: relative;
     height: 100%;
     margin: 0;
+    scrollbar-width: none !important;
+    scrollbar-color: var(--blue-2) var(--scroll-bg);
 }
 /* default element configuration */
 a, a:hover, a:visited {
@@ -505,17 +513,6 @@ th, tr, td, label {
     margin-top: 5px;
 }
 
-:-moz-any() {
-    overflow-x: hidden !important;
-    overflow-y: hidden !important;
-}
-:-moz-any() {
-    overflow-x: scroll !important;
-    overflow-y: scroll !important;
-    margin-right: -14px !important;
-    margin-bottom: -14px !important;
-}
-
 #curtain {
     top: 0;
     left: 0;
@@ -607,6 +604,10 @@ th, tr, td, label {
     border-right: 1px solid var(--blue-3);
     border-bottom: 1px solid var(--blue-3);
 }
+#mode-device, #mode-profile {
+    max-width: 100px;
+    overflow: hidden;
+}
 
 #doit {
     display: none;
@@ -1914,11 +1915,10 @@ th, tr, td, label {
 }
 .settings {
     max-height: 100%;
-    overflow-y: auto;
+    /* overflow-y: overlay !important; */
     overflow-x: hidden;
     align-items: stretch;
     text-transform: capitalize;
-    /* background-color: rgba(255,255,255,0.5); */
 }
 .settings .set-group {
     cursor: pointer;
@@ -1942,7 +1942,7 @@ th, tr, td, label {
     background-color: #fff;
     flex-flow: column;
     padding: 4px;
-    margin: 3px;
+    margin: 2px;
 }
 .set2-group .var-row, .var-row {
     background: #fff;

web/kiri/index.html

@@ -215,12 +215,7 @@
 
         <!-- left settings menu -->
         <div id="panel-left" class="f-col j-left">
-            <!-- always up -->
-            <div id="mode-info">
-                <div><label>Device</label><span id="mode-device"></span></div>
-                <div><label>Profile</label><span id="mode-profile"></span></div>
-            </div>
-            <div class="line-sep2"></div>
+            <!-- <div class="line-sep2"></div> -->
             <div class="f-col grow settings">
                 <!-- FDM -->
                 <div id="fdm-layers" class="set2-group mode-fdm"></div>
@@ -281,6 +276,10 @@
             </div>
             <!-- vertical separation between workspace and right tray -->
             <div id="panel-right" class="f-col j-start settings">
+                <div id="mode-info">
+                    <div><label>Device</label><span id="mode-device"></span></div>
+                    <div><label>Profile</label><span id="mode-profile"></span></div>
+                </div>
                 <div class="set2-group f-col">
                     <div class="set-header"><a>mesh tools</a></div>
                     <div class="render-tools">
@@ -404,7 +403,7 @@
 
         <!-- settings list and editor -->
         <div id="mod-saves" class="mdialog f-col">
-            <label class="set-header menu-title" lk="dm_savs">saved settings</label>
+            <label class="set-header menu-title" lk="dm_savs">settings</label>
             <div id="settingsList" class="f-col"></div>
             <div id="settingsNew">
                 <input id="settingsName" class="grow"></input>

web/kiri/lang/en.js

@@ -81,7 +81,7 @@ self.kiri.lang['en-us'] = {
     dm_mydd:        "my devices",
     dm_seld:        "selected device",
     dm_rcnt:        "recent files",
-    dm_savs:        "saved settings",
+    dm_savs:        "settings",
     dm_appp:        "Application Preferences",
 
     // CAM Tool Dialog