fix(dashboard): mobile layout polish for onboarding/new-agent modals + settings auth gutter

- ModelOnboardingModal: the desktop base set min-width: 640px / min-height:
  480px and the mobile media query only reset max-width — but min-width
  always wins over max-width in size resolution, so the modal stayed pinned
  at 640px and overflowed any phone narrower than that. Compounding it,
  useModalResizePersist writes inline width/height from saved desktop
  sessions (e.g. 1100px), and inline styles beat the media query. Reset
  min-width/min-height to 0 in the mobile rule and force fullscreen
  (100vw/100dvh) with !important so the persisted desktop size cannot
  re-pin the modal off-screen. Also disable resize on mobile.

- NewAgentDialog: had no mobile media query at all. Added a max-width: 768px
  block that drops the overlay padding, fills 100vw/100dvh, removes the
  border-radius, tightens header/footer/steps padding, locks body scroll
  with overscroll-behavior: contain + -webkit-overflow-scrolling: touch
  (so iOS doesn't bubble the scroll up and trap users above the footer),
  and stacks the footer buttons full-width. Also switched the desktop
  max-height from 100vh to 100dvh so iOS Safari's collapsing URL bar
  doesn't push the footer under the address bar.

- SettingsModal auth panel: reduced .auth-panel-body padding-inline from
  --space-xl (24px) to --space-md (12px) so each provider card gets more
  horizontal room — the cards are dense enough that the wider gutter
  wasted visible width without any visual benefit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/ModelOnboardingModal.css

@@ -1226,10 +1226,23 @@
 
 @media (max-width: 768px) {
   .model-onboarding-modal {
-    max-width: 100%;
-    width: 100%;
-    max-height: 100dvh;
+    /* Reset the desktop min-width/min-height — they pin the modal at 640×480
+       and force horizontal overflow on phones (≤414px). The fullscreen
+       width/height below then take effect normally.
+       !important is required because useModalResizePersist writes inline
+       width/height from previously-saved desktop sessions, and inline styles
+       would otherwise win over the media query and re-pin the modal at e.g.
+       1100px on a 375px phone. */
+    min-width: 0 !important;
+    min-height: 0 !important;
+    max-width: 100vw !important;
+    width: 100vw !important;
+    max-height: 100dvh !important;
+    height: 100dvh !important;
     border-radius: 0;
+    /* Disable the desktop resize grip on mobile — it's useless at fullscreen
+       and the resize handle bleeds outside the safe area. */
+    resize: none;
   }
 
   .model-onboarding-header {

packages/dashboard/app/components/NewAgentDialog.css

@@ -17,7 +17,10 @@
   border-radius: var(--radius-lg);
   width: 100%;
   max-width: calc(var(--space-xl) * 21 + var(--space-md));
+  /* Use dvh so iOS Safari's collapsing URL bar doesn't push the footer
+     under the address bar. The vh fallback keeps older browsers working. */
   max-height: calc(100vh - (var(--space-xl) + var(--space-lg)));
+  max-height: calc(100dvh - (var(--space-xl) + var(--space-lg)));
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -536,4 +539,60 @@
   padding: var(--space-sm) 0;
 }
 
+/* === Mobile: fullscreen + scroll === */
+@media (max-width: 768px) {
+  /* Drop the overlay padding so the dialog can fill the viewport edge-to-edge.
+     The desktop padding (20px on all sides) + max-height clamp left ~40px of
+     unusable gutter on phones and pushed the body content off-screen on
+     small devices when the URL bar was visible. */
+  .agent-dialog-overlay {
+    padding: 0;
+    align-items: stretch;
+    justify-content: stretch;
+  }
 
+  .agent-dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  /* Tighter chrome leaves more room for the scrollable body. */
+  .agent-dialog-header,
+  .agent-dialog-footer {
+    padding: var(--space-md) var(--space-md);
+  }
+
+  .agent-dialog-steps {
+    padding: var(--space-sm) var(--space-md);
+    /* Allow the step rail to scroll horizontally on very narrow phones
+       instead of overflowing the dialog. */
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+
+  .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. */
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Stack the footer buttons full-width — primary on top, cancel below.
+     On phones the side-by-side layout truncates labels and pushes Cancel
+     off-screen when the dialog edge meets the safe-area inset. */
+  .agent-dialog-footer {
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+  }
+
+  .agent-dialog-footer > .btn {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}

packages/dashboard/app/components/SettingsModal.css

@@ -683,9 +683,12 @@
 
 /* === Auth Provider Cards === */
 
-/* Horizontal gutter wrapper for the auth section body, matching form-group padding */
+/* Horizontal gutter wrapper for the auth section body. Tighter than the
+   default form-group gutter so each provider card gets more horizontal room
+   — the cards are dense enough that the wider --space-xl gutter wasted
+   visible width without any visual benefit. */
 .auth-panel-body {
-  padding-inline: var(--space-xl);
+  padding-inline: var(--space-md);
 }
 
 .auth-section-hint {