From 5ff787f51676be7e574ce7f8a92952d221a81e90 Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Thu, 7 Oct 2021 11:34:10 -0400
Subject: [PATCH] device/profile hover from blocking back arrow

---
 src/kiri/main.js    |  2 +-
 web/kiri/index.css  | 41 ++++++++++++++++++++++++++---------------
 web/kiri/index.html |  6 +++---
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/kiri/main.js b/src/kiri/main.js
index f2233c96..c2600e9f 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -1154,7 +1154,7 @@
 
         function sliceDone() {
             let alert = null;
-            if (scale === 1 && feature.work_alerts) {
+            if (scale === 1 && feature.work_alerts && slicing.length) {
                 alert = API.show.alert("Rendering");
             };
             KIRI.client.unrotate(settings, () => {
diff --git a/web/kiri/index.css b/web/kiri/index.css
index c6bde899..8ee6d88a 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -277,9 +277,6 @@ th, tr, td, label {
     margin: 0 5px 0 5px;
 }
 
-#app-mode, #app-acct {
-    width: 125px;
-}
 #mode-info.hoverpop {
     display: flex;
 }
@@ -289,21 +286,35 @@ th, tr, td, label {
     white-space: nowrap;
     font-size: smaller;
     font-family: sans-serif;
-    margin-top: 5px;
-    padding: 5px;
-    left: -6px;
-    top: 100%;
-    color: var(--fg-gray);
-    border-radius: 3px;
-    border: 1px solid #ddd;
-    background-color: white;
-}
-#mode-info > div {
-    padding: 2px 0 2px 0;
+    left: 100%;
+    height: 100%;
+    padding: 1px 5px 1px 5px;
+    align-items: center;
+    justify-content: center;
 }
 #mode-info label {
+    font-size: smaller;
     font-weight: bold;
-    padding-right: 5px;
+    margin-left: 5px;
+    padding: 2px 5px 2px 5px;
+    color: var(--fg-gray);
+    background-color: #eee;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+#mode-info > div {
+    font-size: smaller;
+    padding: 2px 5px 2px 5px;
+    color: var(--fg-gray);
+    background-color: white;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
 }
 
 #app-info.hoverpop {
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 6fd13c4f..f4a042bb 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -29,9 +29,9 @@
     <div id="top" class="f-row">
         <div id="app-mode">
             <div id="app-mode-name"></div>
-            <div id="mode-info" class="f-col">
-                <div><label>Device:</label><div id="mode-device">123</div></div>
-                <div><label>Profile:</label><div id="mode-profile">456</div></div>
+            <div id="mode-info" class="f-row">
+                <label>Device</label><div id="mode-device"></div>
+                <label>Profile</label><div id="mode-profile"></div>
             </div>
         </div>
         <div class="grow"></div>