fix: align scroll behavior across widget pages and playgrounds

[effie-ms]

Which Linear task is linked to this PR?

Further improvement for https://linear.app/lifi-linear/issue/EMB-392/fix-widget-scroll-strategy-for-full-heightmobile-layouts

Why was it implemented this way?

1. Consistency fix: LanguagesPage and RoutesPage were the only list pages relying on page-level scroll instead of the internal useListHeight pattern used by Activities, Bridges, Exchanges, Bookmarks, and other list pages. This PR wraps both in a PageContainer + scrollable Box with useListHeight, matching the established pattern.

Before (playground.li.fi) and after (branch deployment):
https://github.com/user-attachments/assets/f68d8bb4-a74c-4e2a-8596-6ebf261b8f0d

2. Small improvement (more stable scroll, without bouncing widget): Added overscroll-behavior: none to both Vite and Next.js playgrounds
   https://github.com/user-attachments/assets/dbdd2daf-7de4-4359-acd9-3e78ee3b455a

3. Fixed unnecessary offsets within widget with mocked page header and footer:
   Before and after:
   https://github.com/user-attachments/assets/fd428712-d19b-45e3-adb2-ef27a5a9fc40

Checklist before requesting a review

• I have performed a self-review and testing of my code.
• This pull request is focused and addresses a single problem.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1ec00d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@lifi/widget	Patch
nft-checkout	Patch
tanstack-router-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

E2E Examples — all passed

All examples passed in the latest run.

[vinzenzLIFI]

QA Review — PR #770 · fix/align-list-scroll-pattern

Build tested: https://02ad9f46.widget-fixalignli.pages.dev/ (v4.0.0-beta.20)
Testing: Automated (Themis) + manual
Date: 2026-06-10

---

Results

#	Workflow / Test	Result
WF-01	Routes list scrolls internally in full-height layout (desktop)	✅ PASS
WF-02	Routes loading skeletons → results	✅ PASS
WF-03	Route card click → Review page (tested to signature request)	✅ PASS
WF-04	Language list scrolls internally in full-height layout	✅ PASS
WF-05	Language selection + checkmark	✅ PASS
WF-06	Mock header offset — widget fits below header	✅ PASS
WF-07	Mock header toggle doesn't mutate widget header config	✅ PASS
WF-08	Bridges list regression	✅ PASS
WF-09	No overscroll bounce on mobile (390×844)	✅ PASS
TC-002	Routes/token list scroll on mobile viewport	✅ PASS
TC-005	RouteNotFoundCard renders correctly	✅ PASS
TC-011	Mock header + fixed footer offset	✅ PASS
TC-016	Exchanges list regression	✅ PASS
TC-017	Activities list regression	✅ PASS
TC-018	Routes page in compact (non-full-height) layout	✅ PASS
TC-019	Routes/Languages in drawer variant	✅ PASS
TC-021	No maxHeight applied when no mock elements active	✅ PASS

17 tested · 17 PASS · 0 FAIL

---

Bug found

EMB-439 — Widget clips under mock header when toggling between layout presets (Medium)

Steps to reproduce:

1. Compact variant, Full Height layout
2. Enable Mock header → widget correctly sits below it
3. Switch to Default layout → mock header hides correctly
4. Switch back to Full Height

The toggle state is preserved and mock header re-enables, but the maxHeight: calc(100vh - 48px) offset is not applied correctly on re-entry, causing the widget content to clip under the header. Tracked separately — not a blocker for this PR.

---

Other observations

• Horizontal overflow in playground: The playground settings panel + widget together slightly exceed the viewport width, causing a horizontal scrollbar. Likely pre-existing.
• Full-height layout doesn't respond to live viewport resize: Reducing the browser window height while in full-height mode does not update the widget height until the layout preset is toggled or the page is refreshed. May be a limitation of the current ResizeObserver setup in useListHeight.
• Mobile — token search auto-focus: Opening the token selector on mobile immediately focuses the search input, triggering the keyboard. Pre-existing, but worth noting for mobile UX.
• TC-011 small viewport edge case: With both mock header and fixed footer active, at very small viewport heights the widget can scroll above the fixed header. The footer stays at the viewport bottom until it gets tight, then moves with the widget. Worth checking whether this is intended behaviour or needs a min-height guard.
• WF-09 — overscroll-behavior not contain: The .long-list container computes overscroll-behavior: auto. Outer page scroll isolation is confirmed working (document is non-scrollable), but the explicit CSS protection against iOS Safari rubber-band bounce is absent. Consider adding overscroll-behavior: contain to .long-list.

---

Verdict

The core fixes are working correctly — RoutesPage and LanguagesPage now scroll internally in full-height layout, the mock header offset is applied correctly, and no regressions were found on other list pages. EMB-439 (clipping on layout re-entry) is the only direct regression from this PR and is tracked separately.

[github-actions]

E2E Playground results

 158 passed

Details

 158 tests across 10 suites
 2 minutes, 54 seconds
 1ec00d6

📥 Download full HTML report (open the run → Artifacts → playwright-report)