[feat](trx-frontend-http): refine main UI controls and map visuals

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

@@ -11,6 +11,7 @@ function loadSetting(key, fallback) {
 }
 
 const freqEl = document.getElementById("freq");
+const wavelengthEl = document.getElementById("wavelength");
 const modeEl = document.getElementById("mode");
 const bandLabel = document.getElementById("band-label");
 const powerBtn = document.getElementById("power-btn");
@@ -150,6 +151,7 @@ function drawHeaderSignalGraph() {
   if (!headerSigCanvas) return;
   const ctx = headerSigCanvas.getContext("2d");
   if (!ctx) return;
+  const isLight = currentTheme() === "light";
   const dpr = window.devicePixelRatio || 1;
   const w = headerSigCanvas.width / dpr;
   const h = headerSigCanvas.height / dpr;
@@ -160,7 +162,7 @@ function drawHeaderSignalGraph() {
   ctx.clearRect(0, 0, w, h);
 
   // Soft horizontal guides for readability.
-  ctx.strokeStyle = "rgba(148, 163, 184, 0.16)";
+  ctx.strokeStyle = isLight ? "rgba(71, 85, 105, 0.26)" : "rgba(148, 163, 184, 0.16)";
   ctx.lineWidth = 1;
   for (let i = 1; i <= 3; i++) {
     const y = Math.round((h * i) / 4) + 0.5;
@@ -172,14 +174,14 @@ function drawHeaderSignalGraph() {
 
   // Minimal S-unit scale markers.
   const yFor = (v) => h - (Math.max(0, Math.min(20, v)) / 20) * (h - 2) - 1;
-  ctx.fillStyle = "rgba(154, 164, 181, 0.55)";
+  ctx.fillStyle = isLight ? "rgba(30, 41, 59, 0.62)" : "rgba(154, 164, 181, 0.55)";
   ctx.font = "10px sans-serif";
   ctx.textAlign = "right";
   ctx.textBaseline = "middle";
   [["S9+", 18], ["S9", 9], ["S0", 0]].forEach(([label, val]) => {
     const y = yFor(val);
     ctx.fillText(label, w - 4, y);
-    ctx.strokeStyle = "rgba(154, 164, 181, 0.22)";
+    ctx.strokeStyle = isLight ? "rgba(51, 65, 85, 0.22)" : "rgba(154, 164, 181, 0.22)";
     ctx.beginPath();
     ctx.moveTo(2, y + 0.5);
     ctx.lineTo(w - 36, y + 0.5);
@@ -193,15 +195,27 @@ function drawHeaderSignalGraph() {
     const windowStart = now - HEADER_SIG_WINDOW_MS;
     const toX = (t) => ((t - windowStart) / HEADER_SIG_WINDOW_MS) * w;
     const strengthGrad = ctx.createLinearGradient(0, h, 0, 0);
-    strengthGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.88)"); // weak: blue
-    strengthGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.9)");
-    strengthGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.9)");
-    strengthGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.92)"); // strong: red
     const fillGrad = ctx.createLinearGradient(0, h, 0, 0);
-    fillGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.12)");
+    if (isLight) {
-    fillGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.16)");
+      // Higher-contrast palette for bright backgrounds.
-    fillGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.18)");
+      strengthGrad.addColorStop(0.0, "rgba(0, 86, 255, 0.95)");   // weak: deep blue
-    fillGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.2)");
+      strengthGrad.addColorStop(0.5, "rgba(0, 179, 255, 0.95)");
+      strengthGrad.addColorStop(0.8, "rgba(255, 133, 0, 0.97)");
+      strengthGrad.addColorStop(1.0, "rgba(224, 36, 36, 0.98)");  // strong: red
+      fillGrad.addColorStop(0.0, "rgba(0, 86, 255, 0.18)");
+      fillGrad.addColorStop(0.5, "rgba(0, 179, 255, 0.20)");
+      fillGrad.addColorStop(0.8, "rgba(255, 133, 0, 0.22)");
+      fillGrad.addColorStop(1.0, "rgba(224, 36, 36, 0.24)");
+    } else {
+      strengthGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.88)"); // weak: blue
+      strengthGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.9)");
+      strengthGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.9)");
+      strengthGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.92)"); // strong: red
+      fillGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.12)");
+      fillGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.16)");
+      fillGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.18)");
+      fillGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.2)");
+    }
 
     ctx.beginPath();
     headerSigSamples.forEach((sample, i) => {
@@ -250,9 +264,22 @@ function formatFreqForStep(hz, step) {
   return formatFreq(hz);
 }
 
+function formatWavelength(hz) {
+  if (!Number.isFinite(hz) || hz <= 0) return "--";
+  const meters = 299_792_458 / hz;
+  if (meters >= 1) return `${Math.round(meters)} m`;
+  return `${Math.round(meters * 100)} cm`;
+}
+
+function refreshWavelengthDisplay(hz) {
+  if (!wavelengthEl) return;
+  wavelengthEl.textContent = formatWavelength(hz);
+}
+
 function refreshFreqDisplay() {
   if (lastFreqHz == null || freqDirty) return;
   freqEl.value = formatFreqForStep(lastFreqHz, jogStep);
+  refreshWavelengthDisplay(lastFreqHz);
 }
 
 function parseFreqInput(val, defaultStep) {
@@ -371,14 +398,18 @@ function freqAllowed(hz) {
 // Convert dBm (wire format) to S-units (S1=-121dBm, S9=-73dBm, 6dB/S-unit).
 // Above S9, returns 9 + (overshoot in S-unit-equivalent, i.e. dB/10).
 function dbmToSUnits(dbm) {
-  if (dbm <= -121) return 0;
+  if (!Number.isFinite(dbm)) return 0;
-  if (dbm >= -73) return 9 + (dbm + 73) / 10;
+  // Guard against bogus backend values to keep display in a realistic range.
-  return (dbm + 121) / 6;
+  const clampedDbm = Math.max(-140, Math.min(20, dbm));
+  if (clampedDbm <= -121) return 0;
+  if (clampedDbm >= -73) return 9 + (clampedDbm + 73) / 10;
+  return (clampedDbm + 121) / 6;
 }
 
 function formatSignal(sUnits) {
-  if (sUnits <= 9) return `S${sUnits.toFixed(1)}`;
+  if (!Number.isFinite(sUnits) || sUnits <= 9) return `S${Math.max(0, sUnits || 0).toFixed(1)}`;
-  const overDb = (sUnits - 9) * 10;
+  // S9+60dB is already extremely strong; cap anything beyond that.
+  const overDb = Math.min(60, (sUnits - 9) * 10);
   return `S9 + ${overDb.toFixed(0)}dB`;
 }
 
@@ -444,15 +475,11 @@ function render(update) {
     if (JSON.stringify(modes) !== JSON.stringify(supportedModes)) {
       supportedModes = modes;
       modeEl.innerHTML = "";
-      const empty = document.createElement("option");
-      empty.value = "";
-      empty.textContent = "--";
-      modeEl.appendChild(empty);
       supportedModes.forEach((m) => {
         const opt = document.createElement("option");
         opt.value = m;
         opt.textContent = m;
-      modeEl.appendChild(opt);
+        modeEl.appendChild(opt);
       });
     }
   }
@@ -462,6 +489,7 @@ function render(update) {
   }
   if (update.status && update.status.freq && typeof update.status.freq.hz === "number") {
     lastFreqHz = update.status.freq.hz;
+    refreshWavelengthDisplay(lastFreqHz);
     if (!freqDirty) {
       refreshFreqDisplay();
     }
@@ -586,7 +614,9 @@ function render(update) {
     signalBar.style.width = "0%";
     signalValue.textContent = "--";
   }
-  bandLabel.textContent = typeof update.band === "string" ? update.band : "--";
+  if (bandLabel) {
+    bandLabel.textContent = typeof update.band === "string" ? update.band : "--";
+  }
   if (typeof update.enabled === "boolean") {
     powerBtn.disabled = false;
     powerBtn.textContent = update.enabled ? "Power Off" : "Power On";
@@ -995,6 +1025,7 @@ let aprsMap = null;
 let aprsMapBaseLayer = null;
 let aprsMapReceiverMarker = null;
 const stationMarkers = new Map();
+const locatorMarkers = new Map();
 const mapMarkers = new Set();
 const mapFilter = { aprs: true, ft8: true, wspr: true };
 
@@ -1172,23 +1203,50 @@ function escapeMapHtml(input) {
     .replaceAll("\"", "&quot;");
 }
 
-window.ft8MapAddLocator = function(message, grids, type = "ft8") {
+function locatorStyleForCount(count, type) {
+  const safeCount = Math.max(1, Number.isFinite(count) ? count : 1);
+  const intensity = Math.min(1, Math.log2(safeCount + 1) / 5);
+  const isWspr = type === "wspr";
+  return {
+    color: isWspr ? "#ff8f2a" : "#ffb020",
+    opacity: 0.45 + intensity * 0.5,
+    weight: 1 + intensity * 1.2,
+    fillColor: isWspr ? "#ff6a3d" : "#ff9b1a",
+    fillOpacity: 0.18 + intensity * 0.55,
+  };
+}
+
+window.ft8MapAddLocator = function(message, grids, type = "ft8", station = null) {
   if (!aprsMap) initAprsMap();
   if (!aprsMap) return;
   if (!Array.isArray(grids) || grids.length === 0) return;
+  const markerType = type === "wspr" ? "wspr" : "ft8";
   const unique = [...new Set(grids.map((g) => String(g).toUpperCase()))];
   const locatorsLines = unique.map((g) => escapeMapHtml(g)).join("<br>");
   for (const grid of unique) {
     const bounds = maidenheadToBounds(grid);
     if (!bounds) continue;
-    const popupContent = `<b>${escapeMapHtml(grid)}</b><br>${locatorsLines}`;
+    const key = `${markerType}:${grid}`;
-    const marker = L.rectangle(bounds, {
+    const stationId = station && String(station).trim() ? String(station).trim().toUpperCase() : "";
-      color: "#ffb020",
+    const existing = locatorMarkers.get(key);
-      weight: 1,
+    if (existing) {
-      fillColor: "#ffb020",
+      if (stationId) existing.stations.add(stationId);
-      fillOpacity: 0.25,
+      const count = existing.stations.size || 1;
-    }).addTo(aprsMap).bindPopup(popupContent);
+      existing.marker.setStyle(locatorStyleForCount(count, markerType));
-    marker.__trxType = type === "wspr" ? "wspr" : "ft8";
+      existing.marker.setPopupContent(
+        `<b>${escapeMapHtml(grid)}</b><br>Stations: ${count}<br>${locatorsLines}`
+      );
+      continue;
+    }
+
+    const stations = new Set();
+    if (stationId) stations.add(stationId);
+    const count = stations.size || 1;
+    const marker = L.rectangle(bounds, locatorStyleForCount(count, markerType))
+      .addTo(aprsMap)
+      .bindPopup(`<b>${escapeMapHtml(grid)}</b><br>Stations: ${count}<br>${locatorsLines}`);
+    marker.__trxType = markerType;
+    locatorMarkers.set(key, { marker, stations });
     mapMarkers.add(marker);
   }
   applyMapFilter();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -37,9 +37,10 @@
     </div>
     <div id="content" style="display:none;">
     <div class="status">
-      <div class="full-row">
+      <div class="full-row freq-row label-below-row">
-        <div class="label">Frequency<span class="band-tag" id="band-label">--</span></div>
+        <div class="label"><span>Frequency</span></div>
         <div class="inline freq-inline">
+          <div class="wavelength-display" id="wavelength" title="Wavelength">--</div>
           <input class="status-input" id="freq" type="text" value="--" />
           <div class="jog-step" id="jog-step">
             <button type="button" data-step="1000000">MHz</button>
@@ -49,16 +50,13 @@
         </div>
       </div>
       <div class="controls-row full-row">
-        <div class="controls-col">
+        <div class="controls-col label-below-col">
-          <div class="label">Mode</div>
+          <div class="label"><span>Mode</span></div>
           <div class="inline">
-            <select class="status-input" id="mode">
+            <select class="status-input" id="mode"></select>
-              <option value="">--</option>
-            </select>
           </div>
         </div>
         <div class="controls-col controls-col-center">
-          <div class="label">Tune</div>
           <div class="jog-container">
             <button id="jog-down" type="button" class="jog-btn">&minus;</button>
             <div class="jog-wheel" id="jog-wheel">
@@ -67,8 +65,8 @@
             <button id="jog-up" type="button" class="jog-btn">+</button>
           </div>
         </div>
-        <div class="controls-col controls-col-power">
+        <div class="controls-col controls-col-power label-below-col">
-          <div class="label">Transmit / Power</div>
+          <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>
@@ -76,12 +74,12 @@
           </div>
         </div>
       </div>
-      <div class="full-row" id="vfo-row">
+      <div class="full-row label-below-row" id="vfo-row">
-        <div class="label">VFO</div>
+        <div class="label"><span>VFO</span></div>
         <div class="vfo-picker" id="vfo-picker"></div>
       </div>
-      <div class="full-row">
+      <div class="full-row label-below-row">
-        <div class="label">Signal</div>
+        <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>
@@ -92,8 +90,8 @@
           <span id="sig-result"></span>
         </div>
       </div>
-      <div class="full-row" id="tx-meters" style="display:none;">
+      <div class="full-row label-below-row" id="tx-meters" style="display:none;">
-        <div class="label">TX Meters</div>
+        <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>
@@ -104,15 +102,15 @@
         </div>
       </div>
       <div id="tx-limit-row" style="display:none;">
-        <div class="label">TX Limit — units depend on rig (percentage/watts)</div>
+        <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" id="audio-row">
+    <div class="full-row label-below-row" id="audio-row">
-      <div class="label">Audio</div>
+      <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>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js

@@ -92,6 +92,18 @@ function extractAllGrids(message) {
   return out;
 }
 
+function extractLikelyCallsign(message) {
+  const parts = String(message || "").toUpperCase().split(/[^A-Z0-9/]+/);
+  for (const token of parts) {
+    if (!token) continue;
+    if (token.length < 3 || token.length > 12) continue;
+    if (token === "CQ" || token === "DE" || token === "QRZ" || token === "DX") continue;
+    if (/^[A-R]{2}\d{2}(?:[A-X]{2})?$/.test(token)) continue;
+    if (/^[A-Z0-9/]{1,5}\d[A-Z0-9/]{1,6}$/.test(token)) return token;
+  }
+  return null;
+}
+
 function escapeHtml(input) {
   return input
     .replaceAll("&", "&amp;")
@@ -154,9 +166,11 @@ document.getElementById("ft8-clear-btn").addEventListener("click", async () => {
 // --- Server-side FT8 decode handler ---
 window.onServerFt8 = function(msg) {
   ft8Status.textContent = "Receiving";
-  const grids = extractAllGrids((msg.message || "").toString());
+  const raw = (msg.message || "").toString();
+  const grids = extractAllGrids(raw);
+  const station = extractLikelyCallsign(raw);
   if (grids.length > 0 && window.ft8MapAddLocator) {
-    window.ft8MapAddLocator(msg.message || "", grids);
+    window.ft8MapAddLocator(raw, grids, "ft8", station);
   }
   addFt8Message({
     ts_ms: msg.ts_ms,

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/wspr.js

@@ -68,6 +68,18 @@ function extractAllGrids(message) {
   return out;
 }
 
+function extractLikelyCallsign(message) {
+  const parts = String(message || "").toUpperCase().split(/[^A-Z0-9/]+/);
+  for (const token of parts) {
+    if (!token) continue;
+    if (token.length < 3 || token.length > 12) continue;
+    if (token === "CQ" || token === "DE" || token === "QRZ" || token === "DX") continue;
+    if (/^[A-R]{2}\d{2}(?:[A-X]{2})?$/.test(token)) continue;
+    if (/^[A-Z0-9/]{1,5}\d[A-Z0-9/]{1,6}$/.test(token)) return token;
+  }
+  return null;
+}
+
 function applyWsprFilterToRow(row) {
   if (!wsprFilterText) {
     row.style.display = "";
@@ -102,8 +114,9 @@ window.onServerWspr = function(msg) {
   wsprStatus.textContent = "Receiving";
   const raw = (msg.message || "").toString();
   const grids = extractAllGrids(raw);
+  const station = extractLikelyCallsign(raw);
   if (grids.length > 0 && window.ft8MapAddLocator) {
-    window.ft8MapAddLocator(raw, grids, "wspr");
+    window.ft8MapAddLocator(raw, grids, "wspr", station);
   }
   addWsprMessage({
     ts_ms: msg.ts_ms,

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -24,6 +24,8 @@
   --filter-bg: #1b2431;
   --filter-fg: #e5e7eb;
   --filter-border: #334155;
+  --wavelength-fg: #8f9daf;
+  --jog-wheel-size: 83.2px;
 }
 
 [data-theme="light"] {
@@ -51,11 +53,24 @@
   --filter-bg: #eef3fb;
   --filter-fg: #1f2937;
   --filter-border: #b8c5da;
+  --wavelength-fg: #6b7280;
 }
 
 body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
 .card { border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.75rem; width: 60vw; box-shadow: 0 12px 40px rgba(0,0,0,0.35); background: var(--card-bg); }
 .label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; }
+#tab-main .label > span {
+  display: inline-block;
+  padding: 0.14rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border-light) 68%, transparent);
+  background: color-mix(in srgb, var(--btn-bg) 58%, transparent);
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+}
 .status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
 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); }
@@ -64,26 +79,55 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 1rem;
-  align-items: stretch;
+  align-items: start;
 }
 .controls-col {
   min-width: 0;
-  display: grid;
+  display: flex;
-  grid-template-rows: auto 1fr;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.controls-col.label-below-col {
+  align-items: stretch;
+}
+.controls-col.label-below-col .label {
+  order: 2;
+  margin-top: 0.3rem;
+  margin-bottom: 0;
+}
+.controls-col.label-below-col > :not(.label) {
+  order: 1;
+}
+.controls-col.label-below-col .inline,
+.controls-col.label-below-col .btn-grid {
+  align-self: stretch;
+  width: 100%;
+  margin-top: calc((var(--jog-wheel-size) - var(--control-height)) / 2);
+}
+.controls-col-center {
+  justify-self: center;
+  width: auto;
+  align-items: center;
+}
+.controls-col-center::after {
+  content: "";
+  display: block;
+  min-height: 1.2rem;
+  margin-top: 0.3rem;
 }
-.controls-col-center { justify-self: center; width: auto; }
 .controls-row .label {
   margin-bottom: 6px;
+  margin-top: 0;
   min-height: 1.2rem;
   display: flex;
   align-items: center;
   white-space: nowrap;
 }
 .controls-col .inline,
-.controls-col .jog-container,
 .controls-col .btn-grid {
-  align-self: center;
+  align-self: stretch;
 }
+.controls-col .jog-container { align-self: center; }
 .btn-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -97,8 +141,8 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   gap: 0.5rem;
 }
 .jog-wheel {
-  width: 83.2px;
+  width: var(--jog-wheel-size);
-  height: 83.2px;
+  height: var(--jog-wheel-size);
   border-radius: 50%;
   background: radial-gradient(circle at 40% 35%, var(--jog-hi), var(--jog-lo));
   border: 2px solid var(--border-light);
@@ -191,8 +235,44 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
 .hint { color: var(--text-muted); font-size: 0.85rem; }
 .inline { display: flex; gap: 0.5rem; align-items: center; }
 .freq-inline #freq { flex: 1 1 auto; }
+.label-below-row {
+  display: flex;
+  flex-direction: column;
+}
+.label-below-row > .label {
+  order: 2;
+  margin-top: 0.45rem;
+  margin-bottom: 0;
+}
+.label-below-row > :not(.label) {
+  order: 1;
+}
+.wavelength-display {
+  min-width: 6.2rem;
+  height: 3.35rem;
+  padding: 0 0.7rem;
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  background: var(--input-bg);
+  color: var(--wavelength-fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'DSEG14 Classic', monospace;
+  font-weight: 600;
+  font-size: 1.25rem;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 small { color: var(--text-muted); }
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
+.header {
+  display: grid;
+  grid-template-columns: 16em 1fr auto;
+  align-items: center;
+  column-gap: 1.5em;
+  margin-bottom: 0.25rem;
+}
 .header-text {
   width: 16em;
   min-width: 16em;
@@ -200,11 +280,10 @@ small { color: var(--text-muted); }
 }
 .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
 .header-signal-wrap {
-  flex: 1 1 auto;
+  width: 100%;
-  width: auto;
   min-width: 160px;
   height: clamp(2.6rem, 8vh, 4.5rem);
-  margin: 0 1.5em;
+  margin: 0;
   border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
   border-radius: 8px;
   background: color-mix(in srgb, var(--input-bg) 72%, transparent);
@@ -410,6 +489,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   .header-right { align-items: flex-end; }
   .controls-row { grid-template-columns: 1fr auto; }
   .controls-col-power { grid-column: 1 / -1; }
+  .controls-col.label-below-col .inline,
+  .controls-col.label-below-col .btn-grid { margin-top: 0; }
   .ft8-controls { flex-wrap: wrap; }
   #ft8-decode-toggle-btn, #wspr-decode-toggle-btn { white-space: nowrap; }
   .jog-container { flex-wrap: wrap; }