From 2e8f025b1915a87a0163b22fe883e26c35befa0f Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Tue, 10 Mar 2026 18:57:59 +0100
Subject: [PATCH] [fix](trx-frontend-http): fix spectrum center-shift arrow
 behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs fixed:

1. Wrong vertical position of shift buttons and bookmark side panels.
   top: calc((--spectrum-plot-height - --overview-plot-height) / 2)
   evaluates to 0 when both vars are equal (default 160 px), so
   translateY(-50%) placed the buttons at the top edge of .spectrum-wrap
   instead of mid-canvas. Changed to calc(--spectrum-plot-height / 2).

2. Rapid clicks on the arrows did not accumulate: each call read
   lastSpectrumData.center_hz which is only updated when the server
   sends a new spectrum frame. Added spectrumCenterPendingHz to track
   the optimistic center immediately on click; reset when the server
   confirms a frame near the expected position.

Also hide .spectrum-bookmark-side on ≤640px (no horizontal room on
narrow phones); previously visible but clipped off-screen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js          | 11 ++++++++++-
 .../trx-frontend-http/assets/web/style.css       | 16 ++++------------
 2 files changed, 14 insertions(+), 13 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 de26d45..47ae486 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
@@ -1762,14 +1762,19 @@ function tunedFrequencyForCenterCoverage(centerHz, freqHz = lastFreqHz, bandwidt
   return alignFreqToRigStep(Math.round(clampedHz));
 }
 
+// Optimistic center freq: updated immediately on each arrow click so that
+// rapid clicks accumulate rather than all starting from the same stale frame.
+let spectrumCenterPendingHz = null;
+
 async function shiftSpectrumCenter(direction) {
   if (!lastSpectrumData || !Number.isFinite(direction) || direction === 0) return;
   const sampleRate = effectiveSpectrumCoverageSpanHz(lastSpectrumData.sample_rate);
-  const currentCenterHz = Number(lastSpectrumData.center_hz);
+  const currentCenterHz = spectrumCenterPendingHz ?? Number(lastSpectrumData.center_hz);
   if (!Number.isFinite(sampleRate) || sampleRate <= 0 || !Number.isFinite(currentCenterHz)) return;
 
   const stepHz = Math.max(50_000, Math.round(sampleRate * 0.35));
   const nextCenterHz = alignFreqToRigStep(Math.round(currentCenterHz + direction * stepHz));
+  spectrumCenterPendingHz = nextCenterHz;
   showHint("Shifting spectrum…", 900);
   await postPath(`/set_center_freq?hz=${nextCenterHz}`);
   if (centerFreqEl && !centerFreqDirty) {
@@ -6517,6 +6522,10 @@ function startSpectrumStreaming() {
       const rds = lastSpectrumData?.rds;
       lastSpectrumData = { bins, center_hz: centerHz, sample_rate: sampleRate, rds };
       window.lastSpectrumData = lastSpectrumData;
+      // Server confirmed a new center — clear optimistic pending value.
+      if (spectrumCenterPendingHz !== null && Math.abs(centerHz - spectrumCenterPendingHz) < 1000) {
+        spectrumCenterPendingHz = null;
+      }
       lastSpectrumRenderData = buildSpectrumRenderData(lastSpectrumData);
       settlePendingSpectrumFrameWaiters(lastSpectrumData);
       pushSpectrumPeakHoldFrame(lastSpectrumRenderData);
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 d6952d5..916699a 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
@@ -2049,16 +2049,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
     width: 1.5rem;
     height: 2.35rem;
   }
-  .spectrum-bookmark-side {
-    width: 5.85rem;
-    gap: 0.22rem;
-  }
-  .spectrum-bookmark-side-left {
-    left: -7.85rem;
-  }
-  .spectrum-bookmark-side-right {
-    right: -7.85rem;
-  }
+  /* Bookmark side panels need too much horizontal space on narrow screens */
+  .spectrum-bookmark-side { display: none !important; }
   .spectrum-bookmark-side .spectrum-bookmark-chip {
     font-size: 0.58rem;
     padding: 2px 6px;
@@ -2281,7 +2273,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 .spectrum-edge-shift {
   position: absolute;
-  top: calc((var(--spectrum-plot-height) - var(--overview-plot-height)) / 2);
+  top: calc(var(--spectrum-plot-height) / 2);
   transform: translateY(-50%);
   z-index: 8;
   width: 1.7rem;
@@ -2410,7 +2402,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 .spectrum-bookmark-side {
   position: absolute;
-  top: calc((var(--spectrum-plot-height) - var(--overview-plot-height)) / 2);
+  top: calc(var(--spectrum-plot-height) / 2);
   transform: translateY(-50%);
   z-index: 7;
   width: 7.25rem;