From 295a3959990f019582368139ee87f44945e45f9e Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Tue, 3 Mar 2026 19:49:39 +0100
Subject: [PATCH] [fix](trx-frontend): balance waveform and waterfall heights

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 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 7e686b8..d39414c 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
@@ -1882,6 +1882,7 @@ let serverLon = null;
 let initialMapZoom = 10;
 let spectrumCoverageMarginHz = 50_000;
 let spectrumUsableSpanRatio = 0.92;
+const DEFAULT_OVERVIEW_PLOT_HEIGHT_PX = 160;
 const DEFAULT_SPECTRUM_PLOT_HEIGHT_PX = 160;
 let spectrumLayoutPending = false;
 
@@ -1906,21 +1907,31 @@ function updateSpectrumAutoHeight() {
   const root = document.documentElement;
   const tabMainEl = document.getElementById("tab-main");
   const contentEl = document.getElementById("content");
+  const overviewCanvasEl = document.getElementById("overview-canvas");
   const spectrumPanelEl = document.getElementById("spectrum-panel");
   const spectrumCanvasEl = document.getElementById("spectrum-canvas");
-  if (!root || !tabMainEl || !contentEl || !spectrumPanelEl || !spectrumCanvasEl) return;
+  if (!root || !tabMainEl || !contentEl || !overviewCanvasEl || !spectrumPanelEl || !spectrumCanvasEl) return;
 
   const mainVisible = getComputedStyle(tabMainEl).display !== "none";
   const contentVisible = getComputedStyle(contentEl).display !== "none";
   const spectrumVisible = getComputedStyle(spectrumPanelEl).display !== "none";
-  const currentHeight = Math.max(
+  const currentOverviewHeight = Math.max(
+    DEFAULT_OVERVIEW_PLOT_HEIGHT_PX,
+    Math.round(overviewCanvasEl.clientHeight || DEFAULT_OVERVIEW_PLOT_HEIGHT_PX),
+  );
+  const currentSpectrumHeight = Math.max(
     DEFAULT_SPECTRUM_PLOT_HEIGHT_PX,
     Math.round(spectrumCanvasEl.clientHeight || DEFAULT_SPECTRUM_PLOT_HEIGHT_PX),
   );
 
   if (!mainVisible || !contentVisible || !spectrumVisible) {
+    root.style.setProperty("--overview-plot-height", `${DEFAULT_OVERVIEW_PLOT_HEIGHT_PX}px`);
     root.style.setProperty("--spectrum-plot-height", `${DEFAULT_SPECTRUM_PLOT_HEIGHT_PX}px`);
-    if (currentHeight !== DEFAULT_SPECTRUM_PLOT_HEIGHT_PX && lastSpectrumData) {
+    if (
+      (currentOverviewHeight !== DEFAULT_OVERVIEW_PLOT_HEIGHT_PX
+        || currentSpectrumHeight !== DEFAULT_SPECTRUM_PLOT_HEIGHT_PX)
+      && lastSpectrumData
+    ) {
       scheduleSpectrumDraw();
       scheduleOverviewDraw();
     }
@@ -1930,12 +1941,20 @@ function updateSpectrumAutoHeight() {
   const tabBottom = tabMainEl.getBoundingClientRect().bottom;
   const contentBottom = contentEl.getBoundingClientRect().bottom;
   const slackPx = Math.floor(tabBottom - contentBottom);
+  const nextCombinedHeight = Math.max(
+    DEFAULT_OVERVIEW_PLOT_HEIGHT_PX + DEFAULT_SPECTRUM_PLOT_HEIGHT_PX,
+    currentOverviewHeight + currentSpectrumHeight + slackPx - 2,
+  );
   const nextHeight = Math.max(
     DEFAULT_SPECTRUM_PLOT_HEIGHT_PX,
-    currentHeight + slackPx - 2,
+    Math.round(nextCombinedHeight / 2),
   );
-  if (Math.abs(nextHeight - currentHeight) < 2) return;
+  if (
+    Math.abs(nextHeight - currentOverviewHeight) < 2
+    && Math.abs(nextHeight - currentSpectrumHeight) < 2
+  ) return;
 
+  root.style.setProperty("--overview-plot-height", `${nextHeight}px`);
   root.style.setProperty("--spectrum-plot-height", `${nextHeight}px`);
   if (lastSpectrumData) {
     scheduleSpectrumDraw();