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 <[email protected]>

1 files changed, 12 insertions, 1 deletions

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' : ''),