feat(FN-3374): update mobile fullscreen modal selector assertion

This merge updates a mobile fullscreen modal CSS selector assertion in the dashboard test suite, aligning it with a recent UI change to the modal structure.

Fusion-Task-Id: FN-3374

packages/dashboard/app/components/ConfirmDialog.css

@@ -1,5 +1,5 @@
 .confirm-dialog {
-  width: min(420px, calc(100vw - var(--space-2xl)));
+  width: min(calc(var(--space-xl) * 18), calc(100vw - var(--space-2xl)));
 }
 
 .confirm-dialog__body {
@@ -7,6 +7,7 @@
   line-height: 1.5;
   padding: 0 var(--space-xl) var(--space-lg);
   white-space: pre-wrap;
+  overflow-y: auto;
 }
 
 .confirm-dialog__actions {
@@ -16,7 +17,22 @@
 }
 
 @media (max-width: 768px) {
+  .confirm-dialog-overlay {
+    align-items: center;
+    padding-top: max(var(--space-md), env(safe-area-inset-top, 0px));
+    padding-right: var(--space-sm);
+    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
+    padding-left: var(--space-sm);
+  }
+
   .confirm-dialog {
-    width: min(100vw - var(--space-md), 100%);
+    width: min(100%, calc(var(--space-xl) * 16));
+    max-height: calc(100dvh - (var(--space-md) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+    height: auto;
+    border: var(--btn-border-width) solid var(--border);
+    border-radius: var(--radius-lg);
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
   }
 }

packages/dashboard/app/components/ConfirmDialog.tsx

@@ -35,7 +35,7 @@ export function ConfirmDialog({ isOpen, options, onConfirm, onCancel }: ConfirmD
   }
 
   return (
-    <div className="modal-overlay open" onClick={onCancel}>
+    <div className="modal-overlay open confirm-dialog-overlay" onClick={onCancel}>
       <div
         className="modal confirm-dialog"
         onClick={(event) => event.stopPropagation()}

packages/dashboard/app/components/FileMentionPopup.css

@@ -320,6 +320,8 @@
      overlays, so scope the compact override to ChatView's modifier class only. */
   .chat-view-dialog-backdrop {
     align-items: center;
+    justify-content: center;
+    overflow-y: auto;
     padding: var(--space-md);
     padding-top: max(var(--space-md), env(safe-area-inset-top, 0px));
     padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
@@ -329,6 +331,8 @@
     width: 100%;
     max-width: min(100%, calc(var(--space-xl) * 16));
     max-height: calc(100dvh - (var(--space-md) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
   }
 }

packages/dashboard/app/components/__tests__/ChatView.test.tsx

@@ -2948,12 +2948,16 @@ describe("ChatView mobile CSS contract", () => {
 
   it("mobile keeps ChatView dialog backdrop centered with safe-area padding", () => {
     expect(mobileRuleContains(".chat-view-dialog-backdrop", "align-items: center")).toBe(true);
+    expect(mobileRuleContains(".chat-view-dialog-backdrop", "justify-content: center")).toBe(true);
+    expect(mobileRuleContains(".chat-view-dialog-backdrop", "overflow-y: auto")).toBe(true);
     expect(mobileRuleContains(".chat-view-dialog-backdrop", "padding-top: max(var(--space-md), env(safe-area-inset-top, 0px))")).toBe(true);
     expect(mobileRuleContains(".chat-view-dialog-backdrop", "padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px))")).toBe(true);
   });
 
   it("mobile constrains ChatView dialog height and allows internal scrolling", () => {
     expect(mobileRuleContains(".chat-view-dialog", "max-height: calc(100dvh - (var(--space-md) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))")).toBe(true);
+    expect(mobileRuleContains(".chat-view-dialog", "display: flex")).toBe(true);
+    expect(mobileRuleContains(".chat-view-dialog", "flex-direction: column")).toBe(true);
     expect(mobileRuleContains(".chat-view-dialog", "overflow-y: auto")).toBe(true);
   });
 

packages/dashboard/app/components/__tests__/ConfirmDialog.test.tsx

@@ -91,4 +91,18 @@ describe("ConfirmDialog", () => {
 
     expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus();
   });
+
+  it("uses compact mobile override classes on overlay and dialog surface", () => {
+    const { container } = render(
+      <ConfirmDialog
+        isOpen={true}
+        options={{ title: "Discard", message: "Discard changes?" }}
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    );
+
+    expect(container.querySelector(".confirm-dialog-overlay")).toBeTruthy();
+    expect(container.querySelector(".confirm-dialog.modal")).toBeTruthy();
+  });
 });

packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx

@@ -165,7 +165,7 @@ describe("core modals mobile css coverage", () => {
 
     // Verify .gm-modal is included in the modal sizing rule block
     const modalRuleMatch = mobileBlock.match(
-      /\.modal,\s*\.modal-lg,\s*\.modal-md,\s*\.gm-modal\s*\{[^}]+\}/,
+      /\.modal:not\(\.confirm-dialog\),\s*\.modal-lg,\s*\.modal-md,\s*\.gm-modal\s*\{[^}]+\}/,
     );
     expect(modalRuleMatch).not.toBeNull();
     const modalRule = modalRuleMatch![0];

packages/dashboard/app/components/__tests__/mobile-css.test.tsx

@@ -95,7 +95,7 @@ describe("mobile CSS foundation", () => {
     expect(mobileSection).toContain("padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));");
     expect(mobileSection).toContain(".board {");
     expect(mobileSection).toContain("padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));");
-    expect(mobileSection).toContain(".modal,");
+    expect(mobileSection).toContain(".modal:not(.confirm-dialog),");
     expect(mobileSection).toContain("padding-bottom: env(safe-area-inset-bottom, 0px);");
   });
 

packages/dashboard/app/styles.css

@@ -3048,16 +3048,15 @@ input[type="range"]:focus-visible {
   }
 
   /* Modal: full-screen on mobile (cross-cutting overlay/modal base chrome) */
-  .modal-overlay,
+  .modal-overlay:not(.confirm-dialog-overlay),
   .agent-detail-overlay,
   .agent-dialog-overlay,
-  .chat-new-dialog-backdrop,
   .workflow-output-modal-overlay {
     padding-top: 0;
     align-items: stretch;
   }
 
-  .modal,
+  .modal:not(.confirm-dialog),
   .modal-lg,
   .modal-md,
   .gm-modal {