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;