[fix](trx-frontend-http): move band plan strip above waterfall in z-order

The band plan strip was visually positioned between the waterfall and
waveform areas. Move it to the top of .signal-visual-block (above the
overview/waterfall) so it renders above the waterfall. Remove the
bp-webgl transparent overrides since the strip now shows colored
segments in its own position rather than overlaying the spectrum canvas.

https://claude.ai/code/session_01KoxcohG6hn5b7kSc3mC4dA
Signed-off-by: Claude <noreply@anthropic.com>

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

@@ -1263,6 +1263,10 @@ function ensureOverviewCanvasBackingStore() {
 function signalOverlayHeight() {
   if (!overviewCanvas) return 0;
   let height = overviewCanvas.clientHeight || 0;
+  // Include the bandplan strip height when it sits above the overview.
+  if (bandplanStripEl && bandplanStripEl.classList.contains("bp-visible")) {
+    height += bandplanStripEl.clientHeight || 0;
+  }
   const spectrumCanvasEl = document.getElementById("spectrum-canvas");
   const spectrumPanelEl = document.getElementById("spectrum-panel");
   const spectrumVisible =

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

@@ -107,6 +107,7 @@
     </div>
     <div id="content" style="display:none;">
     <div class="signal-visual-block">
+      <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
       <div class="overview-strip">
         <canvas id="overview-canvas" aria-hidden="true"></canvas>
         <div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
@@ -119,7 +120,6 @@
       </div>
       <div id="spectrum-panel" style="display:none;">
         <div class="spectrum-wrap">
-          <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
           <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>

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

@@ -3302,29 +3302,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
+   segments are also rendered via WebGL inside drawSpectrum().  The DOM strip
-   transparent label overlay at the top of the spectrum canvas. */
+   stays above the waterfall with its own coloured segments visible. */
 #spectrum-bandplan-strip.bp-webgl {
-  position: absolute;
+  /* No repositioning needed – the strip lives above the overview strip
-  top: 0;
+     in the .signal-visual-block flex flow. */
-  left: 0;
-  right: 0;
-  background: transparent;
-  border-bottom: none;
-  z-index: 6;
-  pointer-events: none;
-}
-#spectrum-bandplan-strip.bp-webgl .bp-segment {
-  background: transparent !important;
-  border-right-color: transparent;
-}
-#spectrum-bandplan-strip.bp-webgl .bp-segment-label {
-  color: rgba(255,255,255,0.92);
-  text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
-}
-#spectrum-bandplan-strip.bp-webgl .bp-band-label {
-  color: rgba(255,255,255,0.65);
-  text-shadow: 0 0 3px rgba(0,0,0,0.8);
 }
 
 /* Legend in settings */