ModelOnboardingModal:
- API-key row was forced to flex-direction: column on mobile, stacking the
input above the Save button and doubling the vertical space inside the
already-cramped provider card. Switch to flex-direction: row with the
input growing (flex: 1, left-aligned) and Save shrunk to its label
(right-aligned). Tighten input/button min-height to 32px and shrink the
button's inline padding.
- Tighten surrounding form: gap → --space-xs, label font-size → 11px with
no margin-bottom, helper paragraphs → 11px / line-height 1.35.
NewAgentDialog:
- Top of the dialog was cut off under the iOS notch / status bar. Added
env(safe-area-inset-top) to the mobile header padding-top, and
env(safe-area-inset-bottom) to the footer padding-bottom so the home
indicator doesn't cover the action buttons.
- Body wasn't scrolling because the flex child kept its default
min-height: auto, making the dialog grow past the viewport and never
trigger overflow-y: auto. Added min-height: 0 + flex: 1 1 auto on the
body, and flex-shrink: 0 on the header/footer/steps so only the body
gives up height.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
0719fc0d1c