[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>

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") + ":" +

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>

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;