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/ModelOnboardingModal.css

@@ -1359,18 +1359,47 @@
     min-width: 0;
   }
 
-  .onboarding-apikey-input {
-    width: 100%;
-    min-height: 36px;
+  /* Keep the API-key input and the Save button on a single row on mobile.
+     Earlier rule stacked them (input above, button below), which doubled
+     the vertical space inside an already-cramped provider card. The input
+     stays left-aligned and grows to fill the row, the Save button shrinks
+     to its label and pins to the right. */
+  .onboarding-apikey-input-row {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-xs);
   }
 
-  .onboarding-apikey-input-row {
-    flex-direction: column;
-    align-items: stretch;
+  .onboarding-apikey-input {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+    min-height: 32px;
   }
 
   .onboarding-apikey-input-row .btn {
-    min-height: 36px;
+    flex: 0 0 auto;
+    min-height: 32px;
+    /* Compact label so "Save" doesn't bloat the row. */
+    padding-inline: var(--space-md);
+  }
+
+  /* Tighten the surrounding form so the row doesn't sit inside a tall
+     wrapper of label + input + footnote. */
+  .onboarding-apikey-form {
+    gap: var(--space-xs);
+  }
+
+  .onboarding-apikey-field-label {
+    font-size: 11px;
+    margin-bottom: 0;
+  }
+
+  .onboarding-apikey-instructions,
+  .onboarding-apikey-usage {
+    font-size: 11px;
+    line-height: 1.35;
+    margin: 0;
   }
 
   .onboarding-apikey-dashboard-link {