fix(dashboard): mobile polish — single-row api key input, NewAgentDialog safe-area + scroll

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>

packages/dashboard/app/components/NewAgentDialog.css

@@ -561,10 +561,19 @@
     border-right: 0;
   }
 
-  /* Tighter chrome leaves more room for the scrollable body. */
-  .agent-dialog-header,
+  /* Tighter chrome leaves more room for the scrollable body. The header
+     adds env(safe-area-inset-top) so the iOS notch / status bar doesn't
+     hide the title and close button. The footer mirrors that with
+     safe-area-inset-bottom so the home indicator doesn't sit on top of
+     the action buttons. */
+  .agent-dialog-header {
+    padding: calc(var(--space-md) + env(safe-area-inset-top)) var(--space-md)
+      var(--space-md);
+  }
+
   .agent-dialog-footer {
-    padding: var(--space-md) var(--space-md);
+    padding: var(--space-md) var(--space-md)
+      calc(var(--space-md) + env(safe-area-inset-bottom));
   }
 
   .agent-dialog-steps {
@@ -573,12 +582,26 @@
        instead of overflowing the dialog. */
     overflow-x: auto;
     flex-wrap: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Header/footer must not shrink — only the body should give up height
+     to keep the chrome fixed and the body scrollable. */
+  .agent-dialog-header,
+  .agent-dialog-footer {
+    flex-shrink: 0;
   }
 
   .agent-dialog-body {
     padding: var(--space-md);
-    /* Already overflow-y: auto, but lock the scroll inside the body so iOS
-       doesn't bubble it up to the page and trap the user above the footer. */
+    /* `min-height: 0` is required for `overflow-y: auto` to take effect
+       on a flex child — without it the body's intrinsic height grows to
+       its content, the dialog bleeds past the viewport, and scroll never
+       activates. This is the classic flex `min-height: auto` gotcha. */
+    flex: 1 1 auto;
+    min-height: 0;
+    /* Lock the scroll inside the body so iOS doesn't bubble it up to the
+       page and trap the user above the footer. */
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }