From dece938e6e4dc1e1ee8afc76be1c3e91282100bf Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 4 Aug 2026 00:36:08 -0700 Subject: Keep the punks carousel where you left it, and on the page A background repaint rebuilt the strip at scrollLeft 0 mid-swipe; render() now carries scroll positions across the swap the same way it carries focus. The onboarding column also sized itself to the strip's intrinsic width (auto margins defeat flex stretch), overflowing phones below ~450px. Co-Authored-By: Claude Fable 5 --- src/app.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'src/app.js') diff --git a/src/app.js b/src/app.js index eef7ea6..7b7fb9a 100644 --- a/src/app.js +++ b/src/app.js @@ -338,6 +338,13 @@ function render() { fpath = focusPath(a); try { selStart = a.selectionStart; selEnd = a.selectionEnd; } catch {} } + // Same idea for scrollable strips (the punks carousel): a rebuild must not + // yank a half-scrolled list back to its start. Anything marked with + // data-keep-scroll gets its position carried across the swap. + const scrolls = {}; + for (const el of root.querySelectorAll('[data-keep-scroll]')) + if (el.scrollLeft || el.scrollTop) + scrolls[el.getAttribute('data-keep-scroll')] = { l: el.scrollLeft, t: el.scrollTop }; const screen = featureHook('screenView') || (ui.screen === 'wallet' @@ -364,6 +371,10 @@ function render() { try { el.focus({ preventScroll: true }); if (selStart != null && el.setSelectionRange) el.setSelectionRange(selStart, selEnd); } catch {} } } + for (const el of root.querySelectorAll('[data-keep-scroll]')) { + const s = scrolls[el.getAttribute('data-keep-scroll')]; + if (s) { el.scrollLeft = s.l; el.scrollTop = s.t; } + } // Fast-poll the receive address only while the user is actually watching for a // payment (wallet screen, Receive tab, online). Idempotent — safe each render. wallet.setWatchReceive(ui.screen === 'wallet' && ui.tab === 'receive' && !wallet.offline); @@ -2245,7 +2256,7 @@ function onboardScreen() { return page([ title(t('onbAvatarTitle')), h('p', { class: 'muted', style: 'margin:0' }, t('onbAvatarBody')), - h('div', { class: 'onb-punks' }, + h('div', { class: 'onb-punks', 'data-keep-scroll': 'punks' }, ...PUNK_PICKS.map((n) => h('img', { class: 'onb-punk' + (sel === punkImg(n) ? ' sel' : ''), -- cgit v1.2.3