Keep the mobile PWA shell aligned with the iOS keyboard

[SawyerHood]

Summary

• Move the mobile app shell to the visual viewport top.
• Set the shell height from the visible viewport height.
• Preserve normal pinch zoom behavior.
• Add a regression test for a stale Safari viewport pan.

Root cause

Safari can pan only the visual viewport when the software keyboard opens.

The prior code called scrollTo() and used offsetTop + height as the shell height.

An iOS standalone PWA does not always clear this pan after scrollTo().

The stale offset made the shell too tall. It put the composer above the keyboard and moved the header under the status bar.

User impact

The composer now stays above the keyboard during long message edits.

The header also stays inside the visible viewport.

Validation

• Reproduced the fault with a controlled mobile visual viewport.
• Confirmed three viewport changes with a long message.
• Confirmed a zero-pixel shell top and a 16-pixel composer bottom gap.
• Passed four focused viewport tests.
• Passed the @bb/app type check.
• Passed the @bb/app lint task with zero errors.
• Passed the Prettier check for both changed files.

[SawyerHood]

🚨 SLOP COP 🚨 · review

I am the SlopCop. I am reviewing this pull request for security, code quality, performance, architecture, and end-to-end behavior.

The stack contains PR #1110 only. I found no draft or untrusted stack members to skip.

[SawyerHood]

🚨 SLOP COP 🚨 · review

Security review complete: no findings.

The change uses rounded browser viewport numbers for inline styles. It adds no user-controlled strings, network access, storage access, or authorization path. The existing animation-frame gate and cleanup prevent event-based resource growth.

[SawyerHood]

🚨 SLOP COP 🚨 · review

Performance review complete: no findings.

All viewport and window events use one animation-frame path. The callback reads viewport values before two bounded style writes. Cleanup removes every listener and cancels the pending frame. The related prompt-box listener has a separate bounded purpose.

[SawyerHood]

🚨 SLOP COP 🚨 · review

Code-quality and architecture review complete: no findings.

The page-relative top calculation matches the relative shell layout. Cleanup and pinch-zoom behavior remain consistent. The other visual viewport listener controls composer expansion, so it does not duplicate shell geometry logic. The tests cover resize, stale pan, cleanup, and pinch zoom.

[SawyerHood]

🚨 SLOP COP 🚨 · review

End-to-end review complete: no findings.

I started the isolated app at the PR head and opened it in a 390×844 Chromium viewport. The shell started at top: 0px; height: 844px, with no page error. A simulated visual viewport pan produced top: 340px; height: 500px. The pinch-zoom branch removed top and produced height: 840px.

Chromium cannot reproduce the iOS software keyboard itself. The browser test exercised the built application and both geometry branches.

[SawyerHood]

🚨 SLOP COP 🚨 · review

No findings.

The stack contains PR #1110 only. The author has administrator access. I found no skipped stack member.

The security review found no unsafe input, data path, or listener cleanup issue.

The code-quality review found correct shell geometry and no useful architecture refactor. The other viewport listener has a different purpose.

The performance review found bounded animation-frame work and complete cleanup.

Validation passed:

• @bb/app typecheck
• 317 app test files
• 2,373 app tests
• A compact 390×844 browser smoke test
• The stale-pan and pinch-zoom geometry branches

Chromium cannot reproduce the iOS software keyboard. The browser test exercised the built application with controlled visual viewport values.