From fb6a27068ba0afc8f749e21faa6003ee3b7b689a Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Wed, 18 Mar 2026 23:54:15 +0100
Subject: [PATCH] [fix](trx-frontend-http): fit spectrum bookmarks on smaller
 displays

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 23 +++++++++++++++++++
 .../trx-frontend-http/assets/web/style.css    | 12 ++++++----
 2 files changed, 31 insertions(+), 4 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 b3e9e4c..eb1ad8b 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
@@ -8830,6 +8830,29 @@ function updateSideBookmarkStack(container, bookmarks, colorMap) {
       container.appendChild(createBookmarkChip(bm, colorMap, { sideStack: true }));
     }
   }
+
+  const wrapEl = container.parentElement;
+  const wrapRect = wrapEl?.getBoundingClientRect?.();
+  const viewportWidth = Math.max(
+    document.documentElement?.clientWidth || 0,
+    window.innerWidth || 0,
+  );
+  const style = getComputedStyle(container);
+  const sideOffset = Math.abs(
+    parseFloat(container.classList.contains("spectrum-bookmark-side-left") ? style.left : style.right) || 0,
+  );
+  const sideWidth = parseFloat(style.width) || 0;
+  const requiredSpace = Math.max(sideOffset, sideWidth) + 8;
+  const fitsLeft = !wrapRect || wrapRect.left >= requiredSpace;
+  const fitsRight = !wrapRect || (viewportWidth - wrapRect.right) >= requiredSpace;
+  const sideFits = container.classList.contains("spectrum-bookmark-side-left")
+    ? fitsLeft
+    : fitsRight;
+  if (!sideFits) {
+    container.classList.remove("bm-side-visible");
+    return;
+  }
+
   container.classList.add("bm-side-visible");
 }
 
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 46ce940..afd79f1 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
@@ -34,6 +34,9 @@
   --card-base-max-width: 1280px;
   --card-max-width: 1600px;
   --card-bookmark-gutter: 4rem;
+  --signal-visual-max-width: 67.5rem;
+  --spectrum-bookmark-side-width: 6.5rem;
+  --spectrum-bookmark-side-offset: 8.85rem;
 }
 
 [data-theme="light"] {
@@ -629,7 +632,8 @@ small { color: var(--text-muted); }
   display: flex;
   flex-direction: column;
   gap: 0;
-  margin-bottom: 0.9rem;
+  width: min(100%, var(--signal-visual-max-width));
+  margin: 0 auto 0.9rem;
 }
 #signal-split-control {
   position: absolute;
@@ -2949,7 +2953,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   top: calc(var(--spectrum-plot-height) / 2);
   transform: translateY(-50%);
   z-index: 7;
-  width: 7.25rem;
+  width: var(--spectrum-bookmark-side-width);
   display: none;
   flex-direction: column;
   gap: 0.28rem;
@@ -2958,11 +2962,11 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   display: flex;
 }
 .spectrum-bookmark-side-left {
-  left: -10.15rem;
+  left: calc(-1 * var(--spectrum-bookmark-side-offset));
   align-items: flex-end;
 }
 .spectrum-bookmark-side-right {
-  right: -10.15rem;
+  right: calc(-1 * var(--spectrum-bookmark-side-offset));
   align-items: flex-start;
 }
 .spectrum-bookmark-side .spectrum-bookmark-chip {