Mobile: cannot start a session — wizard overflows viewport, "Start session" button unreachable

[onurclb]

Summary

On mobile, the "Start a session" wizard overflows the viewport and the primary Start session button (and the "Dangerously skip permissions" row) is cut off below the bottom edge with no way to scroll to it. This makes it impossible to start a new session from a phone. On desktop the viewport is tall enough that everything fits, so the bug only manifests on small screens.

Steps to reproduce

1. Open the PWA on a phone (installed to home screen, or mobile browser).
2. Tap + to open Start a session.
3. Scroll/look for the Start session button.

Expected: the whole form is reachable — you can get to the Start session button.
Actual: the sheet extends past the bottom of the screen; the last visible control is the "Dangerously skip permissions (RCE risk)" checkbox, and the Start session / Cancel action row is off-screen and unreachable (the dialog does not scroll).

Environment

• Web PWA on Android (Samsung S23 Ultra), also reproducible in a narrow/short desktop window.
• Server v2026.07.x, accessed over Tailscale Serve.

Root cause

In packages/web/src/session/NewSessionWizard.tsx:

• The overlay .rc-wizard (~line 417) is position: fixed; inset: 0; display: grid; place-items: center; with no scroll.
• .rc-wizard__card (~line 426) has no max-height, and neither the card nor .rc-wizard__body (~line 435) has overflow-y.

When the form's intrinsic height exceeds the viewport height, place-items: center centers the card so it bleeds past both the top and bottom edges. Because nothing scrolls, the bottom row .rc-wizard__actions (~line 508, containing the Start session button) is clipped and can't be reached. Taller desktop viewports hide the problem.

Suggested fix

Cap the card height and make the content scroll (optionally keeping the actions pinned):

.rc-wizard { overflow-y: auto; align-items: start; }        /* allow the overlay to scroll; don't force center */
.rc-wizard__card {
  max-height: calc(100dvh - 2 * var(--sp-5));
  display: flex; flex-direction: column;
}
.rc-wizard__body { overflow-y: auto; }                       /* scroll the fields */
/* optional: keep .rc-wizard__actions sticky at the bottom so Start is always visible */

Using 100dvh (dynamic viewport height) also avoids the mobile browser URL-bar height issue. Happy to open a PR if useful.

Screenshots

Phone (Start session button not reachable) vs. desktop (button visible) — attached in the report.