Clear the phone bars from every pane scroller with one token

[MaggieAppleton]

Why

On an iPhone 15 Pro the Decisions pane's first card sat under the glass top bar and could not be scrolled into view (Phone lab note 2026-10-12, item 2). Since panes went full-bleed under both bars (#475), each pane scroller has to clear the bars itself. .plan-decisions[data-phone] .plan-decisions-content still forced padding-top: 16px from the older layout, which overrode the phone workspace's top-inset token.

What changed

• One pair of tokens on the phone workspace root: --phone-pane-top (top chrome + 16px) and --phone-pane-bottom (bottom chrome + 16px). Document, Decisions, Build and Chat take their top padding from it, and the child card adds its stack bar to it.
• One shared scroll-padding-block rule for all four phone pane scrollers, so focus, find-in-page and scrollIntoView stop between the bars. Document keeps its 30% bottom (caret room) and the keyboard-dock override. Chat's bottom padding is 16px because its panel already ends above the tab bar and its composer is the only bar below.
• Removed the stale 16px Decisions phone override in packages/editor/src/styles.css.
• Chat's top gap goes from 12px to 16px to match the other panes. Desktop is unchanged: every rule is scoped to [data-workspace-phone] or [data-phone].

Screenshots

Decisions, iPhone 15 Pro (Safari tab). Before on the left, after on the right.

Decisions, iPhone 15 Pro on the home screen (59px top inset, 34px bottom inset)

Decisions, iPhone SE

Chat, iPhone 15 Pro on the home screen (12px to 16px top gap)

Audit

I measured each state on SE (375×667), 15 Pro (393×659), 15 Pro Max, 15 Pro landscape, and 15 Pro home screen in portrait and landscape (safe-area insets set through CDP). That is 6 devices × 13 states, at both scroll ends. Pass rule: when the pane is scrolled to the top, the first line of content is at or below the bottom of the top bar (or the stack bar on a child). When it is scrolled to the bottom, the last line is at or above the top of the tab bar, save bar or composer. "Gap" is the smallest clearance across devices.

State	Before top	Before bottom	After top	After bottom
Document, root, reading	ok (13px)	ok (153px)	ok (13px)	ok (153px)
Document, root, editing	ok (13px)	ok (152px)	ok (13px)	ok (152px)
Document, child (with stack bar)	ok (101px)	ok (152px)	ok (101px)	ok (152px)
Decisions, open	FAIL 6/6 (−87px)	ok (151px)	ok (16px)	ok (151px)
Decisions, save bar showing	FAIL 6/6 (−87px)	ok (151px)	ok (16px)	ok (151px)
Decisions, second document	FAIL 6/6 (−87px)	ok (151px)	ok (16px)	ok (151px)
Decisions, keyboard up	FAIL 6/6 (−87px)	ok (172px)	ok (16px)	ok (136px)
Decisions, child open	(not measured)	(not measured)	ok (16px below stack bar)	ok (151px)
Build (blocked: answer decisions first)	ok (22px)	ok (211px)	ok (22px)	ok (211px)
Chat, long transcript	ok (10px)	ok (44px)	ok (14px)	ok (44px)
Chat, empty	ok	ok (20px)	ok	ok (18px)
Chat, keyboard up	ok (10px)	ok (44px)	ok (14px)	ok (44px)
Chat, child open	(not measured)	(not measured)	ok (14px)	ok (44px)

At scroll bottom the top bar is usually hidden, so the pass rule is checked against the safe-area strip. I checked the documents sheet and comment sheet in screenshots on every device. They have their own edges and needed no change. I checked the empty and all-resolved Decisions state and the other Build states by code only: they use the same scroller and padding token.

Testing

• New e2e/responsive-phone-clearance.e2e.ts: checks the clearance rule for Document, Chat, Decisions (with and without the save bar) and Build, on 15 Pro and SE. It fails on main (both Decisions cases) and passes on this branch.
• bun run e2e with the new spec plus decisions-phone, chat-phone, phone-workspace, responsive-child-phone, responsive-decisions, comment-sheet, phone-read-mode and discarded-mobile-geometry: 68 passed.
• bun run ci, bun run types, bun test packages/editor apps/web (1429 pass).

Needs a design-contract review

None. The design contract and design record checks pass.

🤖 Generated with Claude Code

[MaggieAppleton]

Review: Looks good

Built this branch and origin/main side by side (fake GitHub, headless Playwright) and measured first-line-vs-top-bar and last-line-vs-bottom-bar at scroll ends.

• Decisions first card, gap below the top bar (main -> PR): iPhone 15 Pro -10 -> 34px, SE -10 -> 34px, 15 Pro landscape -2 -> 34px. The first card is fully visible at scroll top. Screenshots confirm the card starts about 16px under the bar, and in landscape nothing is clipped by the floating tab bar at scroll top.
• Document, Build: identical to main (14px / 24px top gaps). Chat: 12 -> 16px top gap as described; bottom unchanged.
• Desktop: every rule is scoped to [data-workspace-phone] / [data-phone]; the removed editor rule is [data-phone]-only. No desktop change.
• Bottom clearance derives from --phone-bottom-chrome (via --phone-pane-bottom), so the tab-bar-e height change will flow through without edits here.
• The shared scroll-padding-block is overridden after it by the Document 30% rule and the keyboard-dock rule, so comment-sheet reveal and caret room are unchanged. Decisions chip -> card reveal now stops between the bars.

Nice-to-have (non-blocking):

1. --document-top-inset / --document-decisions-top-inset are now plain aliases of --phone-pane-top; consider dropping one alias later.
2. The e2e only checks that the first/last line clears the bars; it doesn't cover the child stack bar or keyboard-up state (checked in the PR audit table only).