From 6bfe57611b792ff3162de2e9e1a4e97240af8133 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 3 Sep 2026 21:39:04 -0700 Subject: 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 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr --- src/app.js | 4 +++- src/style.css | 9 +++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) (limited to 'src') 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; -- cgit v1.2.3