From b5cac4be41f067e4b65e6d5ac86a58aec5260236 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sat, 28 Feb 2026 00:34:50 +0100
Subject: [PATCH] [feat](trx-frontend-http): wrap and layer main controls

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/index.html   | 177 +++++++++---------
 .../trx-frontend-http/assets/web/style.css    |  34 +++-
 2 files changed, 123 insertions(+), 88 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 80930d1..c394673 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -116,96 +116,101 @@
           </div>
         </div>
       </div>
-      <div class="controls-row full-row">
-        <div class="controls-col label-below-col">
-          <div class="label"><span>Mode</span></div>
-          <div class="inline">
-            <select class="status-input" id="mode"></select>
-          </div>
-        </div>
-        <div class="controls-col controls-col-center">
-          <div class="jog-container">
-            <button id="jog-down" type="button" class="jog-btn">&minus;</button>
-            <div class="jog-wheel" id="jog-wheel">
-              <div class="jog-indicator" id="jog-indicator"></div>
+      <div class="full-row controls-tray-shell">
+        <div class="controls-tray-scroll">
+          <div class="controls-tray">
+            <div class="controls-row full-row">
+              <div class="controls-col label-below-col">
+                <div class="label"><span>Mode</span></div>
+                <div class="inline">
+                  <select class="status-input" id="mode"></select>
+                </div>
+              </div>
+              <div class="controls-col controls-col-center">
+                <div class="jog-container">
+                  <button id="jog-down" type="button" class="jog-btn">&minus;</button>
+                  <div class="jog-wheel" id="jog-wheel">
+                    <div class="jog-indicator" id="jog-indicator"></div>
+                  </div>
+                  <button id="jog-up" type="button" class="jog-btn">+</button>
+                </div>
+              </div>
+              <div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;">
+                <div class="inline wfm-controls-inline">
+                  <label class="wfm-control">Deemphasis
+                    <select id="wfm-deemphasis" class="status-input">
+                      <option value="50">50 uS</option>
+                      <option value="75">75 uS</option>
+                    </select>
+                  </label>
+                  <label class="wfm-control">Audio
+                    <select id="wfm-audio-mode" class="status-input">
+                      <option value="stereo">Stereo</option>
+                      <option value="mono">Mono</option>
+                    </select>
+                  </label>
+                </div>
+                <div class="label"><span>WFM</span></div>
+              </div>
+              <div class="controls-col controls-col-power label-below-col" id="tx-power-col">
+                <div class="label"><span>Transmit / Power</span></div>
+                <div class="btn-grid">
+                  <button id="ptt-btn" type="button">Toggle PTT</button>
+                  <button id="power-btn" type="button">Toggle Power</button>
+                  <button id="lock-btn" type="button">Lock</button>
+                </div>
+              </div>
+            </div>
+            <div class="full-row label-below-row" id="vfo-row">
+              <div class="label"><span>VFO</span></div>
+              <div class="vfo-picker" id="vfo-picker"></div>
+            </div>
+            <div class="full-row label-below-row">
+              <div class="label"><span>Signal</span></div>
+              <div class="signal" style="gap: 1rem;">
+                <div class="signal-bar"><div class="signal-bar-fill" id="signal-bar"></div></div>
+                <div class="signal-value" id="signal-value">--</div>
+              </div>
+              <div class="signal-measure">
+                <button id="sig-measure-btn" type="button">Measure</button>
+                <button id="sig-clear-btn" type="button">Clear</button>
+                <span id="sig-result"></span>
+              </div>
+            </div>
+            <div class="full-row label-below-row" id="tx-meters" style="display:none;">
+              <div class="label"><span>TX Meters</span></div>
+              <div class="meter" style="gap: 1rem; margin-bottom: 0.4rem;">
+                <div class="meter-bar"><div class="meter-fill" id="pwr-bar"></div></div>
+                <div class="meter-value" id="pwr-value">PWR --</div>
+              </div>
+              <div class="meter" style="gap: 1rem;">
+                <div class="meter-bar"><div class="meter-fill" id="swr-bar"></div></div>
+                <div class="meter-value" id="swr-value">SWR --</div>
+              </div>
+            </div>
+            <div id="tx-limit-row" style="display:none;">
+              <div class="label"><span>TX Limit — units depend on rig (percentage/watts)</span></div>
+              <div class="inline">
+                <input class="status-input" id="tx-limit" type="number" min="0" max="255" step="1" value="" placeholder="--" />
+                <button id="tx-limit-btn" type="button">Set</button>
+              </div>
+            </div>
+            <div class="full-row label-below-row" id="audio-row">
+              <div class="label"><span>Audio</span></div>
+              <div class="inline" style="gap: 0.6rem; flex-wrap: wrap; align-items: center;">
+                <button id="rx-audio-btn" type="button">RX Audio</button>
+                <button id="tx-audio-btn" type="button">TX Audio</button>
+                <label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
+                <label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
+                <div id="audio-level">
+                  <div id="audio-level-fill"></div>
+                </div>
+                <small id="audio-status" style="min-width: 60px;">Off</small>
+              </div>
             </div>
-            <button id="jog-up" type="button" class="jog-btn">+</button>
-          </div>
-        </div>
-        <div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;">
-          <div class="inline wfm-controls-inline">
-            <label class="wfm-control">Deemphasis
-              <select id="wfm-deemphasis" class="status-input">
-                <option value="50">50 uS</option>
-                <option value="75">75 uS</option>
-              </select>
-            </label>
-            <label class="wfm-control">Audio
-              <select id="wfm-audio-mode" class="status-input">
-                <option value="stereo">Stereo</option>
-                <option value="mono">Mono</option>
-              </select>
-            </label>
-          </div>
-          <div class="label"><span>WFM</span></div>
-        </div>
-        <div class="controls-col controls-col-power label-below-col" id="tx-power-col">
-          <div class="label"><span>Transmit / Power</span></div>
-          <div class="btn-grid">
-            <button id="ptt-btn" type="button">Toggle PTT</button>
-            <button id="power-btn" type="button">Toggle Power</button>
-            <button id="lock-btn" type="button">Lock</button>
           </div>
         </div>
       </div>
-      <div class="full-row label-below-row" id="vfo-row">
-        <div class="label"><span>VFO</span></div>
-        <div class="vfo-picker" id="vfo-picker"></div>
-      </div>
-      <div class="full-row label-below-row">
-        <div class="label"><span>Signal</span></div>
-        <div class="signal" style="gap: 1rem;">
-          <div class="signal-bar"><div class="signal-bar-fill" id="signal-bar"></div></div>
-          <div class="signal-value" id="signal-value">--</div>
-        </div>
-        <div class="signal-measure">
-          <button id="sig-measure-btn" type="button">Measure</button>
-          <button id="sig-clear-btn" type="button">Clear</button>
-          <span id="sig-result"></span>
-        </div>
-      </div>
-      <div class="full-row label-below-row" id="tx-meters" style="display:none;">
-        <div class="label"><span>TX Meters</span></div>
-        <div class="meter" style="gap: 1rem; margin-bottom: 0.4rem;">
-          <div class="meter-bar"><div class="meter-fill" id="pwr-bar"></div></div>
-          <div class="meter-value" id="pwr-value">PWR --</div>
-        </div>
-        <div class="meter" style="gap: 1rem;">
-          <div class="meter-bar"><div class="meter-fill" id="swr-bar"></div></div>
-          <div class="meter-value" id="swr-value">SWR --</div>
-        </div>
-      </div>
-      <div id="tx-limit-row" style="display:none;">
-        <div class="label"><span>TX Limit — units depend on rig (percentage/watts)</span></div>
-        <div class="inline">
-          <input class="status-input" id="tx-limit" type="number" min="0" max="255" step="1" value="" placeholder="--" />
-          <button id="tx-limit-btn" type="button">Set</button>
-        </div>
-      </div>
-    </div>
-    <div class="full-row label-below-row" id="audio-row">
-      <div class="label"><span>Audio</span></div>
-      <div class="inline" style="gap: 0.6rem; flex-wrap: wrap; align-items: center;">
-        <button id="rx-audio-btn" type="button">RX Audio</button>
-        <button id="tx-audio-btn" type="button">TX Audio</button>
-        <label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
-        <label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
-        <div id="audio-level">
-          <div id="audio-level-fill"></div>
-        </div>
-        <small id="audio-status" style="min-width: 60px;">Off</small>
-      </div>
-    </div>
     </div>
     </div>
     <div id="tab-plugins" class="tab-panel" style="display:none;">
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 250a0d6..f725e72 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -93,6 +93,30 @@ body {
   line-height: 1.2;
 }
 .status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
+.controls-tray-shell {
+  min-width: 0;
+}
+.controls-tray-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.2rem;
+}
+.controls-tray {
+  display: grid;
+  gap: 0.95rem;
+  width: max(100%, 58rem);
+  min-width: 0;
+  padding: 0.95rem 1rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--border-light) 85%, transparent);
+  border-radius: 1rem;
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--surface) 88%, transparent),
+      color-mix(in srgb, var(--btn-bg) 76%, transparent));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
+}
 input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem; font-size: 1rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
 #mode { height: var(--control-height); }
 #freq { font-family: 'DSEG14 Classic', monospace; font-size: 2rem; padding: 0.5rem 0.6rem; letter-spacing: 0.05em; text-align: center; }
@@ -354,8 +378,10 @@ small { color: var(--text-muted); }
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   column-gap: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: -0.45rem;
   padding: 0.25rem 0 0.15rem;
+  position: relative;
+  z-index: 2;
 }
 .header-text {
   width: auto;
@@ -365,7 +391,10 @@ small { color: var(--text-muted); }
 .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
 .overview-strip {
   width: 100%;
-  margin: 0.35rem 0 0.95rem;
+  margin: 0 0 0.95rem;
+  padding-top: 0.8rem;
+  position: relative;
+  z-index: 1;
 }
 .overview-toolbar {
   display: flex;
@@ -677,6 +706,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   .card { padding: 0.7rem 0.7rem 1rem; }
   button { min-height: 2.8rem; font-size: 0.95rem; }
   input.status-input, select.status-input { font-size: 1.1rem; }
+  .controls-tray { width: max(100%, 52rem); padding-left: 0.85rem; padding-right: 0.85rem; }
   .freq-inline { gap: 0.5rem; }
   .freq-inline { flex-wrap: wrap; }
   .header-text { width: auto; min-width: 0; flex: 0 1 auto; }