PWA Safe Area Fix: UI nits on iPhone

[arkanaai]

Summary

Tested on: https://wt-fix-pwa-safe-area-2026050.wallet-bitcoin.pages.dev/

Overall the fix looks great! A few remaining nits observed on iPhone:

• Restore tab should be shorter
• Large asset amounts cause the tx date to overflow
• Tx list ought to have some padding so that you don't accidentally press the nav buttons
• When attempting to scroll past the bottom, the entire page is moved up hiding the logo

Screenshots

Restore tab should be shorter

Large asset amounts cause the tx date to overflow

Tx list ought to have some padding so that you don't accidentally press the nav buttons

When attempting to scroll past the bottom, the entire page is moved up hiding the logo

Notes

Reported by @U0AEWD7LHTJ in Slack.

[arkanaai]

Codebase Context

1. Restore tab should be shorter

File: src/screens/Init/Init.tsx:231 / src/screens/Init/Restore.tsx

The "Restore wallet" entry point is a fancy secondary <Button> inside a SheetModal. The Restore.tsx screen uses Content > Padded (both height: 100%) with FlexCol between, which stretches to fill the full viewport — likely too tall on smaller iPhones with safe area insets.

Acceptance criteria:

• Restore screen content fits without excess vertical whitespace on iPhone SE / 14 / 15 Pro Max
• ButtonsOnBottom buttons remain visible without scrolling

Approach: Reduce FlexCol between to FlexCol gap in Restore.tsx so content doesn't stretch to fill height; let ButtonsOnBottom handle its own placement naturally.

---

2. Large asset amounts cause tx date to overflow

File: src/components/TransactionsList.tsx — TransactionLine component (~line 154)

The row uses <FlexRow between alignItems='start'> with no flex constraints on the Left (icon + kind + date) or Right (amounts) children. A long asset amount string on the right can shrink/overflow the left date column.

Acceptance criteria:

• Date is never truncated or hidden regardless of amount length
• Amount wraps or truncates gracefully on the right side

Approach: Add flex: 1; minWidth: 0 to the Left wrapper and flexShrink: 0 (or maxWidth: 50%) to the Right wrapper in TransactionLine.

---

3. Tx list needs bottom padding (accidental nav button presses)

File: src/components/TransactionsList.tsx:235

Height is hardcoded as calc(100dvh - 260px) and .scroll-fade adds padding-bottom: 4rem (src/index.css:760). On iPhone with pill navbar, the last list item sits right behind the navbar — no safe-area-inset-bottom buffer.

Acceptance criteria:

• Last transaction row is fully visible and has a comfortable gap above the pill navbar
• No accidental nav button presses when tapping the last item

Approach: Update the virtualizer container's padding-bottom to calc(4rem + env(safe-area-inset-bottom, 0px)), or thread the clearance through the existing --pill-navbar-clearance CSS variable.

---

4. Scroll past bottom moves entire page / hides logo

File: src/components/Content.tsx, src/components/TransactionsList.tsx, src/index.css

body has overscroll-behavior: none (index.css:135, 172) but the inner scrollable containers (.content with -webkit-overflow-scrolling: touch, and TransactionsList with overflowY: auto) do not. iOS still rubber-bands inner scrollers, causing the fixed status bar / logo to shift.

Acceptance criteria:

• Pulling past top or bottom of any scroll container does not shift the logo or status bar
• Works on Safari iOS 16+ (both PWA standalone and in-browser)

Approach: Add overscroll-behavior: none to .content in index.css and to the virtualizer container style in TransactionsList.tsx.