From b8f6208aa7fa4bf818b41e136dcd9d32eb972448 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 07:49:43 +0000
Subject: [PATCH] [fix](trx-frontend-http): move band plan strip above
 waterfall instead of between waveform and waterfall

Relocate the band plan strip from the top of the spectrum canvas to the
bottom, directly above the waterfall canvas. Move the DOM element inside
.spectrum-wrap before the waterfall canvas so it flows naturally in the
correct position. Remove the reparenting logic since the element is now
always inside .spectrum-wrap.

https://claude.ai/code/session_01FUD2eKgeXMFGhhYTzmA4Z6
Signed-off-by: Claude <noreply@anthropic.com>
---
 .../trx-frontend-http/assets/web/app.js       | 26 ++-----------------
 .../trx-frontend-http/assets/web/index.html   |  2 +-
 .../trx-frontend-http/assets/web/style.css    |  5 ++--
 3 files changed, 6 insertions(+), 27 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 e679f7e..4fb3702 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
@@ -10189,12 +10189,12 @@ function drawSpectrum(data) {
     spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
   }
 
-  // ── Bandplan WebGL strip (top of spectrum, above waterfall) ──
+  // ── Bandplan WebGL strip (bottom of spectrum, above waterfall) ──
   if (bandplanRegion !== "off" && bandplanData) {
     const bpSegs = bandplanVisibleSegments(bandplanRegion, range.visLoHz, range.visHiHz);
     if (bpSegs.length > 0) {
       const bpH = Math.round(BANDPLAN_STRIP_CSS_HEIGHT * dpr);
-      const bpY = 0;
+      const bpY = H - bpH;
       // Dark backdrop so segments are readable over the spectrum fill.
       spectrumGl.fillRect(0, bpY, W, bpH, [0.07, 0.09, 0.15, 0.82]);
       // Thin separator line at bottom of bandplan strip.
@@ -11591,10 +11591,6 @@ let bandplanCacheKey = "";
 const bandplanStripEl = document.getElementById("spectrum-bandplan-strip");
 const bandplanRegionSelect = document.getElementById("bandplan-region-select");
 const bandplanLabelsCheck = document.getElementById("bandplan-labels-check");
-// Original parent of bandplan strip (for reparenting between flow and overlay).
-const _bandplanOrigParent = bandplanStripEl ? bandplanStripEl.parentNode : null;
-const _bandplanOrigNext = bandplanStripEl ? bandplanStripEl.nextSibling : null;
-let _bandplanInWebglParent = false;
 
 (function loadBandplanJson() {
   fetch("/bandplan.json")
@@ -11678,10 +11674,6 @@ function _hideBandplanStrip() {
   bandplanStripEl.classList.remove("bp-visible", "bp-webgl");
   bandplanStripEl.innerHTML = "";
   bandplanCacheKey = "";
-  if (_bandplanInWebglParent && _bandplanOrigParent) {
-    _bandplanOrigParent.insertBefore(bandplanStripEl, _bandplanOrigNext);
-    _bandplanInWebglParent = false;
-  }
 }
 
 function updateBandplanStrip(range) {
@@ -11707,22 +11699,8 @@ function updateBandplanStrip(range) {
   bandplanStripEl.classList.add("bp-visible");
   if (webglMode) {
     bandplanStripEl.classList.add("bp-webgl");
-    // Reparent into .spectrum-wrap so absolute positioning is relative to the
-    // spectrum canvas rather than the outer flow container.
-    const specWrap = spectrumPanelEl.querySelector(".spectrum-wrap");
-    if (specWrap && !_bandplanInWebglParent) {
-      specWrap.appendChild(bandplanStripEl);
-      _bandplanInWebglParent = true;
-      bandplanCacheKey = ""; // force DOM rebuild after reparent
-    }
   } else {
     bandplanStripEl.classList.remove("bp-webgl");
-    // Move back to original document position for non-SDR flow layout.
-    if (_bandplanInWebglParent && _bandplanOrigParent) {
-      _bandplanOrigParent.insertBefore(bandplanStripEl, _bandplanOrigNext);
-      _bandplanInWebglParent = false;
-      bandplanCacheKey = "";
-    }
   }
 
   const newKey = bandplanRegion + ":" + (bandplanShowLabels ? "L" : "N") + ":" +
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 64711d4..816dc05 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
@@ -117,7 +117,6 @@
         <div id="hf-aprs-bar-overlay" aria-live="polite" aria-label="Recent HF APRS frames"></div>
         <div id="cw-bar-overlay" aria-live="polite" aria-label="Recent CW decodes"></div>
       </div>
-      <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
       <div id="spectrum-panel" style="display:none;">
         <div class="spectrum-wrap">
           <div id="spectrum-bookmark-axis"></div>
@@ -128,6 +127,7 @@
           <div id="spectrum-db-axis" aria-hidden="true"></div>
           <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
           <div id="spectrum-tooltip"></div>
+          <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
           <canvas id="spectrum-waterfall-canvas" style="display:none;"></canvas>
           <div id="spectrum-freq-axis">
             <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
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 9438b56..b804bb6 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
@@ -3303,10 +3303,11 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 
 /* ── WebGL overlay mode ── When the spectrum canvas is visible the coloured
    segments are rendered via WebGL.  The DOM strip repositions itself as a
-   transparent label overlay at the top of the spectrum canvas. */
+   transparent label overlay at the bottom of the spectrum canvas, just above
+   the waterfall. */
 #spectrum-bandplan-strip.bp-webgl {
   position: absolute;
-  top: 0;
+  top: calc(var(--spectrum-plot-height) - 18px);
   left: 0;
   right: 0;
   background: transparent;