From 71bf8d9456cca66c91b8a7534cf3833851911828 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 30 Mar 2026 06:05:19 +0000 Subject: [PATCH] [style](trx-frontend-http): move bandplan strip from bottom to top of spectrum Repositions the bandplan rendering above the waterfall instead of below the spectrum waveform. Updates both the WebGL draw position (y=0) and the CSS overlay positioning (top:0) for the label layer. https://claude.ai/code/session_01Bt6iUi6Pc1v7yvLffEjweJ Signed-off-by: Claude --- .../trx-frontend/trx-frontend-http/assets/web/app.js | 8 ++++---- .../trx-frontend/trx-frontend-http/assets/web/style.css | 4 ++-- 2 files changed, 6 insertions(+), 6 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 4bc257a..e679f7e 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,16 +10189,16 @@ function drawSpectrum(data) { spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak)); } - // ── Bandplan WebGL strip (bottom of spectrum, above waterfall) ── + // ── Bandplan WebGL strip (top 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 = H - bpH; + const bpY = 0; // 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 top of bandplan strip. - spectrumGl.drawSegments([0, bpY, W, bpY], + // Thin separator line at bottom of bandplan strip. + spectrumGl.drawSegments([0, bpY + bpH, W, bpY + bpH], [1, 1, 1, 0.08], Math.max(1, dpr * 0.5)); const bpVerts = []; for (const seg of bpSegs) { 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 0e296e1..9af5762 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,10 @@ 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 bottom of the spectrum canvas. */ + transparent label overlay at the top of the spectrum canvas. */ #spectrum-bandplan-strip.bp-webgl { position: absolute; - top: calc(var(--spectrum-plot-height) - 18px); + top: 0; left: 0; right: 0; background: transparent;