[fix](trx-frontend): improve spectrum resize interaction

Make the spectrum resize grip easier to use and style it closer to\nexisting controls.\n\nKeep auto-max behavior by default while allowing manual drag to\nresize beyond viewport fill, enforcing only the minimum height.\n\nCo-authored-by: Codex <codex@openai.com>

Signed-off-by: Stan Grams <sjg@haxx.space>

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

@@ -2012,13 +2012,9 @@ function updateSpectrumAutoHeight() {
   }
 
   const bounds = spectrumHeightBoundsPx(tabMainEl, contentEl, spectrumCanvasEl);
-  const requestedSpectrumHeight = spectrumManualPlotHeightPx == null
+  const nextSpectrumHeight = spectrumManualPlotHeightPx == null
     ? bounds.max
-    : spectrumManualPlotHeightPx;
-  const nextSpectrumHeight = Math.max(
-    bounds.min,
-    Math.min(bounds.max, Math.round(requestedSpectrumHeight)),
-  );
+    : Math.max(bounds.min, Math.round(spectrumManualPlotHeightPx));
   if (spectrumManualPlotHeightPx != null) {
     spectrumManualPlotHeightPx = nextSpectrumHeight;
   }
@@ -2042,9 +2038,12 @@ function beginSpectrumResize(clientY) {
   const spectrumPanelEl = document.getElementById("spectrum-panel");
   if (!tabMainEl || !contentEl || !spectrumCanvasEl || !spectrumPanelEl) return false;
   if (getComputedStyle(spectrumPanelEl).display === "none") return false;
+  const bounds = spectrumHeightBoundsPx(tabMainEl, contentEl, spectrumCanvasEl);
+  const startHeight = Math.max(bounds.min, currentSpectrumHeightPx(spectrumCanvasEl));
   spectrumResizeState = {
     startY: clientY,
-    startHeight: currentSpectrumHeightPx(spectrumCanvasEl),
+    startHeight,
+    minHeight: bounds.min,
   };
   document.body.classList.add("spectrum-resizing");
   return true;
@@ -2053,7 +2052,10 @@ function beginSpectrumResize(clientY) {
 function updateSpectrumResize(clientY) {
   if (!spectrumResizeState) return;
   const deltaY = clientY - spectrumResizeState.startY;
-  spectrumManualPlotHeightPx = spectrumResizeState.startHeight + deltaY;
+  spectrumManualPlotHeightPx = Math.max(
+    spectrumResizeState.minHeight,
+    Math.round(spectrumResizeState.startHeight + deltaY),
+  );
   updateSpectrumAutoHeight();
 }
 

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

@@ -2191,24 +2191,28 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 #spectrum-size-grip {
   position: relative;
-  height: 0.9rem;
-  margin-top: 0.1rem;
-  margin-bottom: 0.3rem;
+  height: 1.1rem;
+  margin: 0.18rem 0 0.42rem;
   cursor: ns-resize;
   touch-action: none;
+  border-radius: 999px;
 }
 #spectrum-size-grip::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
-  width: 3.8rem;
-  height: 0.26rem;
+  width: 4.2rem;
+  height: 0.3rem;
   transform: translate(-50%, -50%);
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
   background: color-mix(in srgb, var(--btn-bg) 78%, transparent);
 }
+#spectrum-size-grip:hover::before {
+  border-color: color-mix(in srgb, var(--accent-yellow) 55%, var(--border-light));
+  background: color-mix(in srgb, var(--accent-yellow) 22%, var(--btn-bg));
+}
 #spectrum-freq-axis span {
   position: absolute;
   transform: translateX(-50%);