From 3dc070ad0c1d1c271cabbf660546df8d8faadd7e Mon Sep 17 00:00:00 2001
From: Meta Vens <rwvens@hotmail.com>
Date: Sat, 25 Apr 2026 04:14:21 +0100
Subject: [PATCH] Refine viewer inspect control row

---
 src/repixelizer/gui_static/index.html |  2 +-
 src/repixelizer/gui_static/styles.css | 32 +++++++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/repixelizer/gui_static/index.html b/src/repixelizer/gui_static/index.html
index 1ba6047..74590c1 100644
--- a/src/repixelizer/gui_static/index.html
+++ b/src/repixelizer/gui_static/index.html
@@ -63,7 +63,7 @@
             </div>
             <div class="viewer-inspect-row">
               <label class="field viewer-inspect-field">
-                <span>Inspect Zoom</span>
+                <span class="viz-label viewer-inspect-label">Zoom</span>
                 <select id="inspectZoomInput">
                   <option value="1">Native source</option>
                   <option value="2">2x</option>
diff --git a/src/repixelizer/gui_static/styles.css b/src/repixelizer/gui_static/styles.css
index a8ae337..fa4b3cd 100644
--- a/src/repixelizer/gui_static/styles.css
+++ b/src/repixelizer/gui_static/styles.css
@@ -665,20 +665,42 @@ p {
 
 .viewer-inspect-row {
   display: flex;
-  align-items: end;
+  align-items: center;
   gap: 14px;
   flex-wrap: wrap;
-  padding: 8px 2px 0;
+  padding: 10px 12px;
+  border: 3px solid rgba(8, 36, 62, 0.88);
+  background:
+    radial-gradient(circle at top left, rgba(255, 216, 74, 0.08), transparent 32%),
+    linear-gradient(180deg, rgba(11, 32, 52, 0.96), rgba(6, 19, 35, 0.94));
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 216, 74, 0.18),
+    0 0 14px rgba(255, 216, 74, 0.06);
 }
 
 .viewer-inspect-field {
-  width: min(100%, 208px);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: auto;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+
+.viewer-inspect-label {
   flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.viewer-inspect-field select {
+  width: min(100%, 208px);
+  min-width: 168px;
 }
 
 .viewer-inspect-copy {
   flex: 1 1 320px;
   margin: 0;
+  min-width: 220px;
   font-size: 1rem;
   line-height: 1.2;
   color: var(--ui-text-muted);
@@ -1053,10 +1075,6 @@ select:focus-visible {
     grid-template-columns: 1fr;
   }
 
-  .viewer-inspect-row {
-    align-items: start;
-  }
-
   .card-head {
     flex-wrap: wrap;
   }