From e3c7231650e7e742bcf95cf5e682b0590434977a Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sun, 1 Mar 2026 10:37:53 +0100
Subject: [PATCH] [fix](trx-frontend): group signal visuals in main tab

Wrap the waterfall and spectrum in a shared main-tab block so lower sections and other tabs keep consistent spacing.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/index.html   | 56 ++++++++++---------
 .../trx-frontend-http/assets/web/style.css    |  8 ++-
 2 files changed, 36 insertions(+), 28 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 9f80802..47d5422 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
@@ -48,10 +48,6 @@
         <button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
       </div>
     </div>
-    <div class="overview-strip">
-      <canvas id="overview-canvas" aria-hidden="true"></canvas>
-      <div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
-    </div>
     <!-- Auth gate (hidden by default, shown if auth is required) -->
     <div id="auth-gate" style="display:none; max-width: 30rem; margin: 0 auto 0.9rem; padding: 1.25rem 0 1.5rem; text-align: center;">
       <div style="margin-bottom: 1.5rem;">
@@ -72,33 +68,39 @@
       <div id="loading-sub" style="color:#9aa4b5;"></div>
     </div>
     <div id="content" style="display:none;">
-    <div id="spectrum-panel" style="display:none;">
-      <div class="spectrum-wrap">
-        <canvas id="spectrum-canvas"></canvas>
-        <div id="spectrum-tooltip"></div>
-        <div id="spectrum-freq-axis"></div>
+    <div class="signal-visual-block">
+      <div class="overview-strip">
+        <canvas id="overview-canvas" aria-hidden="true"></canvas>
+        <div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
       </div>
-      <div id="spectrum-controls">
-        <div id="spectrum-bw-row">
-          <label id="spectrum-bw-label">Bandwidth <input type="number" id="spectrum-bw-input" value="" step="0.1" min="0.1" /> kHz</label>
-          <button id="spectrum-bw-set-btn" type="button">Set</button>
-          <button id="spectrum-bw-auto-btn" type="button">Auto BW</button>
+      <div id="spectrum-panel" style="display:none;">
+        <div class="spectrum-wrap">
+          <canvas id="spectrum-canvas"></canvas>
+          <div id="spectrum-tooltip"></div>
+          <div id="spectrum-freq-axis"></div>
         </div>
-        <div id="spectrum-level-row">
-          <label class="overview-control" id="spectrum-peak-hold-label">Peak Hold
-            <select id="overview-peak-hold" class="status-input">
-              <option value="500">0.5 s</option>
-              <option value="1000">1 s</option>
-              <option value="2000" selected>2 s</option>
-              <option value="5000">5 s</option>
-            </select>
-          </label>
-          <label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label>
-          <button id="spectrum-auto-btn" type="button">Auto</button>
+        <div id="spectrum-controls">
+          <div id="spectrum-bw-row">
+            <label id="spectrum-bw-label">Bandwidth <input type="number" id="spectrum-bw-input" value="" step="0.1" min="0.1" /> kHz</label>
+            <button id="spectrum-bw-set-btn" type="button">Set</button>
+            <button id="spectrum-bw-auto-btn" type="button">Auto BW</button>
+          </div>
+          <div id="spectrum-level-row">
+            <label class="overview-control" id="spectrum-peak-hold-label">Peak Hold
+              <select id="overview-peak-hold" class="status-input">
+                <option value="500">0.5 s</option>
+                <option value="1000">1 s</option>
+                <option value="2000" selected>2 s</option>
+                <option value="5000">5 s</option>
+              </select>
+            </label>
+            <label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label>
+            <button id="spectrum-auto-btn" type="button">Auto</button>
+          </div>
         </div>
+        <div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div>
+        <div id="spectrum-hint-touch" class="spectrum-hint-touch">Pinch to zoom &middot; Drag to pan &middot; Drag BW edges to resize</div>
       </div>
-      <div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div>
-      <div id="spectrum-hint-touch" class="spectrum-hint-touch">Pinch to zoom &middot; Drag to pan &middot; Drag BW edges to resize</div>
     </div>
     <div class="status">
       <div class="full-row freq-row">
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 681b6f9..e16e325 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
@@ -512,6 +512,12 @@ small { color: var(--text-muted); }
   position: relative;
   z-index: 4;
 }
+.signal-visual-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-bottom: 0.9rem;
+}
 #rds-ps-overlay {
   display: none;
   position: absolute;
@@ -1003,7 +1009,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 
 /* ── Spectrum display ─────────────────────────────────────────────────── */
 #spectrum-panel {
-  margin-bottom: 0.9rem;
+  margin-bottom: 0;
 }
 .spectrum-wrap {
   position: relative;