gsxdsm 700943a952 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>

2026-04-28 00:14:21 -07:00

14 KiB

Raw Blame History

View Raw