iPhone Home Screen canvas across app pages

Follow-up to 2026-09-08-mobile-scroll-edges.md and 2026-09-08-iphone-keyboard.md.

Main-branch preparation

The main-branch PR contains only the six Home Screen fix commits from testing: 7c3f572a8, 112192ff0, 3c5b839a1, 4361d0dc6, ec26fce47, and ae0b38f34. The standalone Profile AI page exists only on testing, so it and its route/CSS entries are omitted here; main's AI settings use the corrected Settings page. The canvas-test conflict preserves main's eight-pixel edge and WebKit mask assertions while adapting them to the shared gradient. No backend, schema, dependency, or unrelated testing feature is included.

Follow-up: neutral play status-area tint

The next device screenshot shows the composer filling the screen, but the status area still has a blue-gray band. The shared edge gradient hard-coded Discover's RGB tint at every translucent stop, and the exposed play document used the app's gray background. Blurring that empty safe area cannot pick up the world inside the iframe below it.

Mobile play now uses a black document canvas and a black tint in the shared gradient. Discover/Community retain the original RGB fallback. Blur, fade geometry, notch clearance, iframe height and keyboard behavior are unchanged. The override follows the mounted play shell and mobile plain-canvas mode, so navigating away restores the original surface and desktop is unaffected.

The regression check fails on the original gray canvas and checks the neutral canvas, all gradient stops, navigation cleanup and desktop scope. The supplied screenshot is the visual evidence; the new appearance has not been verified on a physical iPhone.

Validation: 1,688 app tests pass, along with pnpm build and pnpm typecheck. The generated HTML and CSS retain the neutral canvas and variable tint.

Follow-up: photographed play gap after the first viewport correction

The next device screenshot still showed a bottom band after comparing innerHeight and clientHeight. Those APIs can both report the shorter safe content area. WebKit issue 254868, comment 2 describes using legacy 100vh for the installed-app full height; issue 237961 describes fixed document wrappers leaving a gap despite viewport-fit=cover. These reports explain why the earlier two-measurement check was insufficient, rather than constituting a physical-device reproduction of this particular session.

The standalone viewport controller now also measures a hidden 100vh probe. The keyboard still uses visualViewport sizing. Home Screen play releases the fixed/100%-height html/body/root chain, gives those wrappers a full-vh minimum, and positions the measured player absolutely. Its iframe remains below the notch and fills the remaining player height. Other pages retain their existing scroll ownership. This follows WebKit's safe-area guidance: fill the screen, then protect controls selectively.

Play's top decoration now shares the actual Discover gradient, 18px backdrop blur and mask rule. A short transparent tail softens the boundary with the world; pointer events pass through. The edge collapses completely with a zero effective inset, including after keyboard panning, and its fade adapts to short insets. New checks cover the case where both JavaScript heights are short, keyboard dismissal/resume, wrapper clipping, shared decoration, and zero or partially occluded top insets. Physical iPhone appearance remains unverified. Final validation: all 1,684 app tests pass on a clean rerun, as do build and typecheck. An earlier concurrent run hit six failures in the unchanged editor-save test file; its isolated 23 tests and the subsequent complete run both pass. The production bundle was checked for the final viewport source and the zero-inset blur correction.

Follow-up: compact headers and custom play frames

Admin now uses the same compact standalone top inset as the shared TopBar; its sticky navigation and anchor offsets follow that reduced height. Settings puts the mobile Back arrow beside the section heading, removes the duplicated heading row, and reduces the section's top padding from 32px to 8px.

The custom play screenshot had no SessionHeader, so the earlier notch padding on that component could not protect the creator's toolbar. Full play routes now reserve the top safe area on main, outside the iframe, and remove the header's duplicate reservation. The iframe's flex container fills the remaining space to the bottom edge, with no additional bottom padding or outer scrolling. Embedded Studio previews and replays retain their surrounding layout.

Standalone fixed panes use the larger of innerHeight and the document layout viewport, both for idle sizing and keyboard detection. This avoids clipping the bottom when innerHeight is shorter, while real keyboards still use the visual viewport. Native document pages do not use their potentially tall root as a viewport measurement. Regression checks cover short innerHeight, focused iframes, keyboard resizing/dismissal, rotation, browser-tab/native-page exclusions, and notch ownership with and without a regular header. Validation: all 1,680 app tests, the final 37 viewport checks, pnpm build, and pnpm typecheck pass. Built source maps match the changed TypeScript sources, including the final shared viewport baseline.

Check on the iPhone: Admin top spacing, Settings Back/title alignment, and a custom play world with its own top toolbar and bottom composer, including opening/dismissing the keyboard. These bounds are covered in DOM/geometry tests; physical WebKit rendering still requires the device.

Follow-up: remaining bottom bands

The follow-up screenshots showed that sharing only the document wallpaper was insufficient for Settings/AI configuration, Admin and Create: their fixed-height inner panes still clipped the page above the Home Screen bottom edge. These pages now also use Discover/Community's native document scrollport, including the critical HTML bootstrap. Only their outer page wrappers are released; dialogs retain their own scrolling. Create switches back to a contained editor when a template is opened at the same URL.

The DM inbox already used document scrolling, but its tinted, blurred frame ended above main's safe-area padding. Its mobile frame is now transparent, so the document paints the full edge as on Discover. Open DM conversations retain their keyboard viewport. Admin uses the same scroll method with its own #111214 document color, and its sticky navigation/anchor links account for the status area. AI settings retains top notch padding (its shared TopBar is hidden) and drops obsolete bottom-navigation padding.

Settings switches its named scroll target between the visible menu and content pane, preserving that target through rotation. Entering a section starts at its header; returning restores the menu position. Search results can still scroll to and focus a specific control.

Four new regression checks failed before the changes: native startup routes, released wrapper heights, admin canvas color, and the inbox's tinted frame. Additional DOM checks cover keyboard handling, the Create picker/editor transition, and Settings menu/content/history scroll behavior. Independent review found and resolved the AI notch and Settings scroll-transition issues. The smaller Home Screen header padding from 112192ff0 is preserved. Final validation: all 1,678 app tests, pnpm build, and pnpm typecheck pass.

Device follow-up: launch Settings → AI configuration, Messages inbox, Admin, and Create from the Home Screen; scroll to both ends. In Settings, enter a section after scrolling the menu, return, and rotate in both views. In Create, open a template and focus an editor field. Physical iPhone/WebKit compositor verification remains a device check; no browser was opened during this work.

Findings and changes

• Discover already paints its wallpaper on the document, with transparent wrappers and a shared edge color. Extend that canvas to every mobile app entry before React loads and after navigation. Wallpaper pages, including account settings, use the same renderer; play, Studio and admin use their plain background through the same transparent wrappers. Canvas ownership does not change which element owns scrolling.
• Profile's mobile banner replaces the shared topbar. Its artwork now has Discover's exact edge gradient above the image and below the controls.
• Library detail's sticky action bar already includes the home-indicator inset. Remove main's duplicate inset only when that bar exists; loading and deleted entries keep their original safe spacing.
• A focused field or sandbox iframe can remain focused after keyboard dismissal. In Home Screen mode, use the visual viewport only for a detected keyboard; otherwise restore the full window height. Browser-tab behavior, native reading-page scrolling, zoom and resume handling remain intact.
• Reserve the top safe area in full play/preview route headers. Replays already have TopBar, and embedded Studio previews must not reserve it again. Remove the standalone-only composer rule that discarded its bottom safe spacing.

Validation

Regression coverage includes cold/deep-link loading, desktop/creator exclusion, redirect cleanup, wallpaper preference cleanup, rotation, retained focus after keyboard dismissal, Profile edge layering, Library detail with/without actions, and play headers versus embedded/replay headers.

The new startup-canvas and retained-focus regressions failed against the previous implementation. Full app tests pass (1,672/1,672), as do the 63 focused canvas, viewport and DM checks after incorporating the latest testing-branch change. pnpm build and pnpm typecheck pass on that merged state. Built source maps were also checked against the current shell, viewport, canvas, Profile and DM sources to rule out stale compilation output.

The full repository test run also reports an existing billing-coverage failure for packages/server/src/lib/music/openrouter-music.ts. All server files are identical to the starting origin/testing revision 6c3f28c34; this frontend change does not modify music billing.

No browser or physical iPhone was used. DOM/geometry tests and CSS compilation cannot verify the WebKit compositor. On the testing deployment, launch from Add to Home Screen, visit Discover, Library (including a detail page), Profile, settings and a play session. Scroll to each end, rotate, open/dismiss the keyboard without blurring the field, and background/resume the app. Check the status and home-indicator edges, controls, and retained drafts.