fix modal dialog for small windows. better onresize handling for sliders and modals

src/kiri/init.js

@@ -1059,7 +1059,18 @@
             controller = settings().controller,
             dark = controller.dark;
 
-        WIN.addEventListener("resize", API.dialog.update);
+        WIN.addEventListener("resize", () => {
+            API.event.emit('resize');
+        });
+
+        API.event.on('resize', () => {
+            if (WIN.innerHeight < 800) {
+                UI.modalBox.classList.add('mh85');
+            } else {
+                UI.modalBox.classList.remove('mh85');
+            }
+            API.view.update_slider();
+        });
 
         SPACE.showSkyGrid(false);
         SPACE.setSkyColor(dark ? 0 : 0xffffff);
@@ -1090,6 +1101,7 @@
             nozzle:             $('lt-nozzle'),
 
             modal:              $('modal'),
+            modalBox:           $('modal-box'),
             help:               $('mod-help'),
             setup:              $('mod-setup'),
             tools:              $('mod-tools'),

src/kiri/main.js

@@ -185,7 +185,7 @@
         },
         dialog: {
             show: showModal,
-            hide: hideModal,
+            hide: hideModal
         },
         help: {
             show: showHelp,

web/kiri/index.css

@@ -146,6 +146,15 @@ th, tr, td {
 .russo {
     font-family: 'Russo One', sans-serif;
 }
+.overy {
+    overflow-y: auto;
+}
+.mh0 {
+    min-height: 0;
+}
+.mh85 {
+    max-height: 85%;
+}
 
 :-moz-any() {
  overflow-x: hidden !important;
@@ -451,12 +460,12 @@ th, tr, td {
     display: none;
     position: fixed;
     z-index: 20;
-    transform: translateY(-50%);
     top: 50%;
     left: 0px;
     right: 0px;
     bottom: 0px;
     height: 300px;
+    transform: translateY(-50%);
     background-color: var(--bg-gray);
     border-bottom: 1px solid black;
     border-top: 1px solid black;
@@ -473,7 +482,6 @@ th, tr, td {
     padding: 10px;
     min-height: 20px;
     font-size: smaller;
-    xfont-family: monospace;
     background-color: rgba(255,255,255,0.75);
 }
 
@@ -677,6 +685,7 @@ th, tr, td {
 .t-pad2 {
     width: 10px;
 }
+
 #devices {
     width: 200px;
 }

web/kiri/index.html

@@ -193,7 +193,7 @@
         </div>
         <div id="mid-mcol" class="grow">
             <div id="modal">
-                <div class="col">
+                <div id="modal-box" class="col">
 
                 <div class="mod-top row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
                 <div id="mod-help" class="mdialog col">
@@ -211,17 +211,17 @@
                         <button id="mode-cam" class="dev-type"><label>CNC</label></button>
                         <button id="mode-laser" class="dev-type"><label>LASER</label></button>
                     </div>
-                    <div class="row">
+                    <div class="row mh0">
                         <div id="devices" class="t-33 col"><select id="device-list" size="15" class="grow"></select></div>
                         <div class="t-pad"></div>
-                        <div id="device" class="col t-body t-inset"></div>
+                        <div id="device" class="col t-body t-inset overy"></div>
                         <div class="t-pad"></div>
                         <div id="gcode-edit" class="t-body t-inset col">
                             <div class="set-header col">gcode editor</div>
                             <div id="dev-gcode" class="grow"></div>
                         </div>
                     </div>
-                    <div id="device-action" class="flow-row">
+                    <div id="device-action" class="row">
                         <div class="grow"></div>
                         <button id="device-add"><i class="fas fa-plus"></i></button>
                         <button id="device-del"><i class="fas fa-minus"></i></button>