move progress bar, cleanup device info

src/kiri/main.js

@@ -302,15 +302,10 @@ gapp.register("kiri.main", [], (root, exports) => {
          return proto.toLowerCase().indexOf("https") === 0;
     }
 
-    function setProgress(value, msg) {
-        if (value) {
+    function setProgress(value = 0, msg) {
         value = (value * 100).round(4);
-            UI.loading.display = 'block';
         UI.progress.width = value+'%';
         if (msg) UI.prostatus.innerHTML = msg;
-        } else {
-            UI.loading.display = 'none';
-        }
     }
 
     function bound(v,min,max) {

web/kiri/index.css

@@ -515,11 +515,16 @@ th, tr, td, label {
     align-items: stretch;
     justify-content: center;
     padding: 3px;
+    display: grid !important;
+    grid-template-columns: auto 1fr;
+}
+#mode-info > div {
+    display: contents;
 }
 #mode-info label {
     font-size: smaller;
     font-weight: bold;
-    margin-left: 5px;
+    margin: 2px 0 2px 5px;
     padding: 2px 5px 2px 5px;
     color: var(--fg-gray);
     background-color: #eee;
@@ -530,6 +535,7 @@ th, tr, td, label {
     border-bottom: 1px solid #ddd;
 }
 #mode-info span {
+    margin: 2px 5px 2px 0;
     font-size: smaller;
     padding: 2px 5px 2px 5px;
     color: var(--fg-gray);
@@ -1079,23 +1085,23 @@ th, tr, td, label {
 }
 
 #progress {
-    display: none;
-    position: absolute;
-    top: 0px;
-    left: 10%;
-    right: 10%;
+    left: 0;
+    right: 0;
+    height: 6px;
+    min-height: 6px;
     text-align: center;
     background-color: rgba(0,0,0,0.15);
     border-radius: 3px;
 }
 #progbar {
-    width: 100%;
+    width: 0;
     text-align: left;
     position: relative;
     background-color: rgba(255,0,0,0.65);
     border-radius: 3px;
 }
 #progtxt {
+    display: none;
     color: white;
     margin: 0 5px 0 5px;
     padding: 0 5px 2px 5px;

web/kiri/index.html

@@ -244,9 +244,10 @@
 
     <!-- line betwwen menu bar and main application windows -->
     <div id="top-mid-sep"></div>
+    <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
+    <div id="top-mid-sep"></div>
 
     <div id="mid" class="grow f-row">
-        <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
 
         <!-- left settings menu -->
         <div id="mid-left" class="f-col j-left">