From a82541e24e04fe77965464ef45bde54bc8ecf80c Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Thu, 26 Mar 2026 20:53:50 +0100
Subject: [PATCH] [fix](trx-frontend-http): drop peak labels, equalize
 spectrum/waterfall split

Remove overkill peak frequency labels from spectrum view. Set waterfall
height to match spectrum height (1:1 split) instead of fixed 120px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 28 -------------------
 .../trx-frontend-http/assets/web/index.html   |  1 -
 .../trx-frontend-http/assets/web/style.css    | 26 +----------------
 3 files changed, 1 insertion(+), 54 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index 17d6eaa..41b9b24 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -9452,31 +9452,6 @@ function drawSpectrum(data) {
     spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
   }
 
-  // ── Peak frequency labels (top 5 strongest) ──
-  if (markerPeaks.length > 0) {
-    const topPeaks = markerPeaks.slice(0, 5);
-    const labelEl = document.getElementById("spectrum-peak-labels");
-    if (labelEl) {
-      labelEl.innerHTML = "";
-      const cssW = spectrumCanvas.clientWidth || 640;
-      const cssH = spectrumCanvas.clientHeight || 160;
-      for (const idx of topPeaks) {
-        const peakHz = loHz + (idx / (n - 1)) * fullSpanHz;
-        const peakDb = bins[idx];
-        if (peakDb < DB_MIN + 6) continue; // skip near-floor peaks
-        const xFrac = (peakHz - range.visLoHz) / range.visSpanHz;
-        if (xFrac < 0.02 || xFrac > 0.98) continue;
-        const yFrac = 1 - (Math.max(DB_MIN, Math.min(DB_MAX, peakDb)) - DB_MIN) / dbRange;
-        const span = document.createElement("span");
-        span.className = "spectrum-peak-label";
-        span.textContent = formatSpectrumFreq(peakHz);
-        span.style.left = (xFrac * cssW) + "px";
-        span.style.top = Math.max(2, yFrac * cssH - 16) + "px";
-        labelEl.appendChild(span);
-      }
-    }
-  }
-
   // ── Crosshair lines ──
   if (spectrumCrosshairX != null && spectrumCrosshairY != null) {
     const cx = spectrumCrosshairX * dpr;
@@ -10582,9 +10557,6 @@ if (spectrumCanvas) {
     spectrumCanvas.style.cursor = "crosshair";
     spectrumCrosshairX = null;
     spectrumCrosshairY = null;
-    // Clear peak labels on leave
-    const labelEl = document.getElementById("spectrum-peak-labels");
-    if (labelEl) labelEl.innerHTML = "";
     scheduleSpectrumDraw();
   });
 }
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 7959218..60372a4 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
@@ -118,7 +118,6 @@
           <div id="spectrum-bookmark-axis"></div>
           <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
           <canvas id="spectrum-canvas"></canvas>
-          <div id="spectrum-peak-labels" aria-hidden="true"></div>
           <div id="spectrum-zoom-indicator" aria-hidden="true"></div>
           <div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div>
           <div id="spectrum-db-axis" aria-hidden="true"></div>
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 66eab9f..62ad286 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
@@ -34,7 +34,6 @@
   --card-base-max-width: 1280px;
   --card-max-width: 1600px;
   --card-bookmark-gutter: 9.5rem;
-  --spectrum-waterfall-height: 120px;
   --spectrum-bookmark-side-width: 6.5rem;
   --spectrum-bookmark-side-offset: 8.85rem;
 }
@@ -3108,29 +3107,6 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   font-weight: 700;
   pointer-events: none;
 }
-/* ── Peak labels on spectrum ── */
-#spectrum-peak-labels {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--spectrum-plot-height);
-  pointer-events: none;
-  z-index: 6;
-  overflow: hidden;
-}
-.spectrum-peak-label {
-  position: absolute;
-  transform: translateX(-50%);
-  font-size: 0.58rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  color: var(--text-muted);
-  font-weight: 600;
-  white-space: nowrap;
-  pointer-events: none;
-  text-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 80%, transparent);
-  opacity: 0.85;
-}
 /* ── Zoom indicator ── */
 #spectrum-zoom-indicator {
   display: none;
@@ -3173,7 +3149,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 #spectrum-waterfall-canvas {
   display: block;
   width: 100%;
-  height: var(--spectrum-waterfall-height, 120px);
+  height: var(--spectrum-plot-height);
   background: var(--spectrum-bg);
   cursor: crosshair;
   touch-action: none;