From 3dbddc39c2b92f46560a4c9ce4d9d87b344d7a51 Mon Sep 17 00:00:00 2001 From: Daniel Han Date: Tue, 19 May 2026 06:57:08 -0700 Subject: [PATCH] studio/frontend: settings dialog fits viewport at tablet widths (#5600) * studio/frontend: settings dialog fits viewport at tablet widths The dialog used a fixed w-[820px] with sm:w-[820px] override, so any viewport between 640px and 820px (iPad portrait at 768px is the canonical case) saw the dialog overflow horizontally by 26px on each side -- the right-edge scroll arrow and the active-tab chevron got clipped against the viewport. Replace the hard 820 with min(820px, calc(100vw-2rem)) on both max-w and w so the dialog caps at the original 820px on desktop and shrinks to fit (with a 1rem gutter) on narrower screens. max-sm: still drives the full-bleed h-dvh/w-dvw layout under 640px. * studio/frontend: keep mobile full-bleed override !important Bot review: base !max-w-[min(...)] is !important so the regular max-sm:max-w-none never wins, leaving a 1rem gutter on phones where the previous code rendered a true full-bleed dialog. Bump the mobile override to !important too. --------- Co-authored-by: danielhanchen --- studio/frontend/src/features/settings/settings-dialog.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx index 384e359f31..3b95cb2355 100644 --- a/studio/frontend/src/features/settings/settings-dialog.tsx +++ b/studio/frontend/src/features/settings/settings-dialog.tsx @@ -109,10 +109,12 @@ export function SettingsDialog() { } }} className={cn( - "!max-w-none h-[560px] w-[820px] p-0 overflow-hidden", + // Cap at 820px but shrink to the viewport so we don't clip + // on iPad-portrait widths (640-820px) where the fixed + // `w-[820px]` overflows by 26px on each side. + "!max-w-[min(820px,calc(100vw-2rem))] h-[560px] w-[min(820px,calc(100vw-2rem))] p-0 overflow-hidden", "shadow-border rounded-xl border-border", - "sm:h-[560px] sm:w-[820px]", - "max-sm:h-dvh max-sm:w-dvw max-sm:rounded-none", + "max-sm:h-dvh max-sm:w-dvw max-sm:!max-w-none max-sm:rounded-none", )} > Settings