feat(auth): lay the phone lock screen out in three bands

[alchaplinsky]

Summary

The phone lock screen stacked everything in one centred column: the mascot took the centre of the screen, and the Face ID tile and a bordered 52px "Enter Master Password" button competed below it as two offers of the same weight. This lays the same parts out by purpose, in three bands over the whole ground.

• Top band — who and which vault. The brand (mascot and wordmark) and the vault chip, hanging under the safe area as a masthead does.
• Centre band — the one thing to do. The status line over the 88px biometric tile when a key is enrolled, or over the passphrase card. The bands around it are equal (grid-rows-[1fr_auto_1fr]), so it sits at the exact centre of the screen, not merely in what the masthead leaves over.
• Bottom band — the backup. "Enter Master Password" as a plain 44px text control in the accent ink by the footer, the same tier as the nav rows' Cancel and Save. One tap on Face ID is the way in; the passphrase is for the day Face ID does not answer, and no longer looks like a second button the size of the first.
• Keyboard. The ground is sized to the visual viewport (viewportStyle, as the compact shell already is), so the keyboard the card brings up shortens the screen under the card rather than covering it.
• AuthShell gains two opt-in props, fill and style, defaulting to its old behaviour.

Compact only. The wide lock screen (Auth) passes neither prop and renders as before. Its centred block with the card leading is the right layout where a keyboard is the primary input, so nothing here was carried over.

Verification

• bun run typecheck, bun run lint (0 warnings), bun run build: clean
• bun run test: 1072 passed
• Not run on a device. Worth a look: the brand's distance from the Dynamic Island, and the card's position with the keyboard up.

Decisions

• adopted · implementation · [compact-shell] — The phone lock screen is three bands over the whole ground: brand at the top, the biometric tile (or card) at the screen's exact centre, the passphrase as a plain text control by the footer. — The primary action belongs where the eye and thumb land; the passphrase is a backup and should not weigh as much as the tile.
• adopted · implementation · [compact-shell] — The compact lock screen's ground is sized to the visual viewport. — The keyboard the card brings up must shorten the ground, not cover the card; the compact shell already does the same.
• rejected · implementation · [compact-shell] — Carrying the three-band layout to the wide lock screen. — With a keyboard the card leads, and a centred block is the right layout for it.

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no new actionable issue was found.

Summary

The phone lock screen now separates the brand, unlock action, and password backup into three bands.

• The phone lock screen separates identity, unlocking, and password backup into three bands.

_{Reviews (3) · Last reviewed commit: "fix(auth): float the masthead in its ban..." · Reviewed by Greptile}