Two carousel polish fixes. The 'slight move after history loads' was the vertical scrollbar: a short page has none, the history list filling in makes the page tall enough to get one, the viewport narrows ~15px, and the snapped card re-centers into the narrower width — a horizontal nudge right as history lands. scrollbar-gutter:stable reserves the gutter so growing content never changes the width. And the 'false start' — a boot render's alignment firing a scrollTo mid-drag — is guarded: alignment now bails while a finger/mouse is down

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr

2 files changed, 12 insertions, 1 deletions

diff --git a/src/app.js b/src/app.js
index 4e4ab32..82cf537 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3392,7 +3392,9 @@ function balanceCard() {
     requestAnimationFrame(() => {
       const el = document.querySelector('.bal-carousel');
       if (!el || el._alignedTo === sel) return;
-      if (Date.now() - (el._lastScroll || 0) < 350) return;
+      // never yank the card while a finger/mouse is on it, or right after a
+      // scroll — a boot render firing this mid-drag was the "false start"
+      if (el._dragging || Date.now() - (el._lastScroll || 0) < 350) return;
       const k = el.children[ORDER2.indexOf(sel)];
       if (!k) return;
       const target = k.offsetLeft + k.offsetWidth / 2 - el.clientWidth / 2;
diff --git a/src/style.css b/src/style.css
index e846f52..ea9618e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -64,6 +64,15 @@
 
 * { box-sizing: border-box; }
 
+html {
+  /* Reserve the scrollbar's gutter always, so it doesn't appear the instant
+     the history list fills the page and shrink the viewport — that width
+     change re-centered the balance carousel's snapped card, the "slight move
+     one last time" after a switch. Stable gutter = no reflow when content
+     grows. */
+  scrollbar-gutter: stable;
+}
+
 html, body {
   margin: 0;
   padding: 0;