From 2bc93514b59dce43360ed01558a3b321a8c454cf Mon Sep 17 00:00:00 2001
From: Jan Svabenik <jan@svabi.ch>
Date: Sun, 22 Mar 2026 22:48:26 +0100
Subject: [PATCH] Polish signals tab layout and listen session UI

---
 web/app.js     |  6 ++++--
 web/index.html |  2 +-
 web/style.css  | 32 ++++++++++++++++++++++++--------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/web/app.js b/web/app.js
index 16b2fe2..0e67a79 100644
--- a/web/app.js
+++ b/web/app.js
@@ -569,8 +569,8 @@ function renderSignalPopover(rect, signal) {
   }).join('');
   const primaryMode = getSignalPrimaryMode(signal);
   const runtimeInfo = getSignalRuntimeSummary(signal);
-  signalPopover.innerHTML = `<div class="signal-popover__title">${primaryMode}${signal.class?.pll?.rds_station ? ' · ' + signal.class.pll.rds_station : ''}</div><div class="signal-popover__meta">${fmtMHz(signal.class?.pll?.exact_hz || signal.center_hz, 5)} · ${fmtKHz(signal.bw_hz || 0)} · ${(signal.snr_db || 0).toFixed(1)} dB SNR${runtimeInfo ? ` · ${runtimeInfo}` : ''}${signal.class?.pll?.locked ? ` · PLL ${signal.class.pll.method} LOCK` : ''}${signal.class?.pll?.stereo ? ' · STEREO' : ''}</div><div class="signal-popover__scores">${rows || '<div class="signal-popover__meta">No classifier scores</div>'}</div>`;  const popW = 220;
-  const left = rect.x + rect.w + 8;
+  signalPopover.innerHTML = `<div class="signal-popover__title">${primaryMode}${signal.class?.pll?.rds_station ? ' · ' + signal.class.pll.rds_station : ''}</div><div class="signal-popover__meta">${fmtMHz(signal.class?.pll?.exact_hz || signal.center_hz, 5)} · ${fmtKHz(signal.bw_hz || 0)} · ${(signal.snr_db || 0).toFixed(1)} dB SNR${runtimeInfo ? ` · ${runtimeInfo}` : ''}${signal.class?.pll?.locked ? ` · PLL ${signal.class.pll.method} LOCK` : ''}${signal.class?.pll?.stereo ? ' · STEREO' : ''}</div><div class="signal-popover__scores">${rows || '<div class="signal-popover__meta">No classifier scores</div>'}</div>`;
+  const popW = 220;
   const top = rect.y + 8;
   const maxLeft = Math.max(8, spectrumCanvas.width - popW - 8);
   signalPopover.style.left = `${Math.max(8, Math.min(maxLeft, left))}px`;
@@ -2442,3 +2442,5 @@ setInterval(loadDecoders, 10000);
 
 
 
+
+
diff --git a/web/index.html b/web/index.html
index 122200f..6cc4546 100644
--- a/web/index.html
+++ b/web/index.html
@@ -284,7 +284,7 @@
             <button class="act-btn" id="liveListenBtn" type="button">Live Listen</button>
             <div class="listen-meta" id="listenMeta">
               <div class="listen-meta__head">
-                <div class="listen-meta__title">Live listen</div>
+                <div class="listen-meta__title">Listen session</div>
                 <div class="listen-meta__badge" id="listenMetaStatus">Idle</div>
               </div>
               <div class="listen-meta__primary">
diff --git a/web/style.css b/web/style.css
index c7d71a8..28a1644 100644
--- a/web/style.css
+++ b/web/style.css
@@ -245,6 +245,16 @@ canvas { display: block; width: 100%; height: 100%; border-radius: var(--r-sm);
 
 .tab-panel { display: none; height: 100%; overflow: auto; padding-right: 4px; }
 .tab-panel.active { display: block; }
+.tab-panel[data-panel="signals"] {
+  display: none;
+  height: 100%;
+}
+.tab-panel[data-panel="signals"].active {
+  display: grid;
+  grid-template-rows: auto minmax(120px, 1fr) auto auto auto auto;
+  gap: 8px;
+  min-height: 0;
+}
 
 /* ── Form Groups ── */
 .form-group {
@@ -341,6 +351,12 @@ input[type="range"]::-moz-range-thumb {
   color: var(--accent);
 }
 .signal-list, .event-list { display: grid; gap: 5px; }
+.signal-list {
+  min-height: 0;
+  overflow: auto;
+  align-content: start;
+  padding-right: 2px;
+}
 .empty-state { font-size: 0.78rem; color: var(--text-mute); padding: 12px 0; }
 
 /* List items — rendered by app.js */
@@ -361,13 +377,13 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .listen-meta {
-  margin-top: 8px;
-  padding: 10px;
+  margin-top: 2px;
+  padding: 8px 10px;
   border-radius: var(--r);
   border: 1px solid var(--line);
   background: rgba(5, 8, 14, 0.72);
   display: grid;
-  gap: 6px;
+  gap: 5px;
 }
 .listen-meta__head {
   display: flex;
@@ -377,9 +393,9 @@ input[type="range"]::-moz-range-thumb {
 }
 .listen-meta__title {
   font-family: var(--mono);
-  font-size: 0.6rem;
+  font-size: 0.56rem;
   font-weight: 600;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-mute);
 }
@@ -402,7 +418,7 @@ input[type="range"]::-moz-range-thumb {
 }
 .listen-meta__mode {
   font-family: var(--mono);
-  font-size: 0.9rem;
+  font-size: 0.82rem;
   font-weight: 700;
   color: var(--text);
 }
@@ -416,9 +432,9 @@ input[type="range"]::-moz-range-thumb {
 .listen-meta__secondary {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 8px;
   font-family: var(--mono);
-  font-size: 0.66rem;
+  font-size: 0.63rem;
   color: var(--text-dim);
 }