diff --git a/packages/web-shell/client/components/dialogs/DialogShell.test.tsx b/packages/web-shell/client/components/dialogs/DialogShell.test.tsx
index 26425e6b1d5..36a507df0f4 100644
--- a/packages/web-shell/client/components/dialogs/DialogShell.test.tsx
+++ b/packages/web-shell/client/components/dialogs/DialogShell.test.tsx
@@ -187,7 +187,13 @@ describe('DialogShell', () => {
     // stays full-width and never tracks the content.
     expect(panel.className).toContain('w-max');
     expect(panel.className).not.toContain('w-full');
-    expect(panel.className).toContain('min-w-[min(100%,560px)]');
+    // The floor has to subtract the same gutter the surviving base ceiling
+    // (`max-w-[calc(100%-2rem)]`) reserves. twMerge keeps both classes, and
+    // below `sm:` a bare `min(100%,560px)` floor outranks that ceiling, so the
+    // panel would render flush to both screen edges on a phone.
+    expect(panel.className).toContain('min-w-[min(calc(100%-2rem),560px)]');
+    expect(panel.className).not.toContain('min-w-[min(100%,560px)]');
+    expect(panel.className).toContain('max-w-[calc(100%-2rem)]');
     expect(panel.className).toContain(
       'sm:max-w-[min(calc(100vw-2rem),1120px)]',
     );
diff --git a/packages/web-shell/client/components/dialogs/DialogShell.tsx b/packages/web-shell/client/components/dialogs/DialogShell.tsx
index 260aab228e0..341a0e2083c 100644
--- a/packages/web-shell/client/components/dialogs/DialogShell.tsx
+++ b/packages/web-shell/client/components/dialogs/DialogShell.tsx
@@ -43,7 +43,12 @@ const sizeClass: Record<DialogSize, string> = {
   // room. `w-max` wins over DialogContent's base `w-full` through
   // tailwind-merge. The floor keeps small graphs from collapsing to a narrow
   // panel; the ceiling keeps large ones from spanning a wide monitor.
-  auto: 'w-max min-w-[min(100%,560px)] sm:max-w-[min(calc(100vw-2rem),1120px)]',
+  // The floor uses the same 2rem gutter the base ceiling
+  // (`max-w-[calc(100%-2rem)]`) reserves: twMerge keeps both classes, and
+  // below `sm:` a bare `min(100%,560px)` floor outranks that ceiling, so the
+  // panel rendered flush to both screen edges on a phone while every fixed
+  // size kept its gutter.
+  auto: 'w-max min-w-[min(calc(100%-2rem),560px)] sm:max-w-[min(calc(100vw-2rem),1120px)]',
 };
 
 const FOCUSABLE_SELECTOR = [