From d541c3154e8d6476c201bbd3443fbba1866f2edb Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 30 Jul 2026 23:24:33 -0700 Subject: [PATCH] fix(dashboard): retire the dead .agent-detail-overlay CSS (#2915) (#2985) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #2915. `.agent-detail-overlay` has had **no renderer** since FN-8619 moved Agent Detail onto `FloatingWindow`, whose `modal` host owns the scrim (`.floating-window-overlay--modal`). Four CSS sites plus one inert mobile `@media` rule. ## Why this sat unfixed, and what unblocked it I filed this earlier and deliberately did **not** delete the CSS, because two *passing* guards pinned a selector list naming the class: ``` dashboard-overflow-containment.test.tsx:295 mobile-horizontal-pan-containment.test.ts:90 ".modal-overlay:not(.confirm-dialog-overlay),\n .agent-detail-overlay,\n .agent-dialog-overlay,\n .workflow-output-modal-overlay" ``` Neither list mentions `.floating-window-overlay--modal`. If that list were the mechanism keeping modal scrims inside mobile horizontal-pan containment, then FN-8619 moved every migrated modal's scrim out from under the guard and the dead entry was **masking a live defect** — deleting it would have been the wrong move twice over. I said at the time I couldn't settle it without rendering at a phone breakpoint. **That was wrong — it is answerable by reading**, and I only went back because the same mistaken conclusion cost me a day on the Planning coverage in #2982. **The containment lockdown is global**, on the mobile `html, body` block in `styles.css`: ```css @media (max-width: 768px) { html, body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; } ``` `FloatingWindow.css` says so itself at its mobile breakpoint — *"Mobile keeps the global `styles.css` pan-y lockdown so the dashboard cannot drift"*. The per-overlay list only reasserts it for overlays that are themselves scroll containers. Migrated modals are covered by the global rule, so **no hole, and no masked defect**. ## Verified the guards still guard something The risk in editing a pinned selector string is turning a real guard into a string-equality formality: | state | result | |---|---| | after this change | 15/15 pass | | global lockdown broken (`touch-action` / `overscroll-behavior-x` removed from `html, body`) | **2 failed / 13 passed** | They fail on the mechanism, not the text. ## Scope note Two of the four `styles.css` sites are **grouped selectors shared with `.agent-dialog-overlay`, which is still live** (`NewAgentDialog.tsx:415`). So this is a selector-list edit, not a block deletion — easy to get wrong in a bulk sweep, which is why it is called out here and in the FNXC note replacing the deleted rule. The retired mobile rule set `padding: 0; align-items: stretch` on the overlay. Not a lost feature: `.floating-window-overlay` is `position: fixed; inset: 0` with no flex context, so those declarations had nothing to act on — FloatingWindow positions the panel by geometry. **Verified:** 120/120 across `agent-modals-mobile`, `core-modals-mobile`, `AgentDetailView.core`, and both containment guards; `tsc -p tsconfig.app.json` 0 errors; lint clean; FNXC gate exit 0. Dead-CSS removal with no behaviour change, so no changeset. Main health while I was here: engine **11475 passed / 0 failed**. Co-authored-by: Claude Opus 5 (1M context) --- .../dashboard-overflow-containment.test.tsx | 2 +- .../mobile-horizontal-pan-containment.test.ts | 2 +- .../app/components/AgentDetailView.css | 34 ++++++++++--------- packages/dashboard/app/styles.css | 2 -- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/dashboard/app/__tests__/dashboard-overflow-containment.test.tsx b/packages/dashboard/app/__tests__/dashboard-overflow-containment.test.tsx index 734a17d865..f9193b2a1f 100644 --- a/packages/dashboard/app/__tests__/dashboard-overflow-containment.test.tsx +++ b/packages/dashboard/app/__tests__/dashboard-overflow-containment.test.tsx @@ -292,7 +292,7 @@ describe("dashboard overflow containment shared mobile/tablet net (FN-6385)", () const mobileRootBlock = ruleBlock(mobileCss, "html,\n body"); const mobileOverlayBlock = ruleBlock( mobileCss, - ".modal-overlay:not(.confirm-dialog-overlay),\n .agent-detail-overlay,\n .agent-dialog-overlay,\n .workflow-output-modal-overlay", + ".modal-overlay:not(.confirm-dialog-overlay),\n .agent-dialog-overlay,\n .workflow-output-modal-overlay", ); const detailBodyBlock = ruleBlock(baseCss, ".detail-body"); const boardBaseBlock = ruleBlock(baseCss, ".board"); diff --git a/packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts b/packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts index 2cb72cef28..009549236a 100644 --- a/packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts +++ b/packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts @@ -87,7 +87,7 @@ describe("mobile horizontal pan containment (FN-6365)", () => { it("constrains mobile fullscreen overlays to the viewport inline size", () => { const overlayBlock = ruleBlock( mobileCss, - ".modal-overlay:not(.confirm-dialog-overlay),\n .agent-detail-overlay,\n .agent-dialog-overlay,\n .workflow-output-modal-overlay", + ".modal-overlay:not(.confirm-dialog-overlay),\n .agent-dialog-overlay,\n .workflow-output-modal-overlay", ); const modalBlock = ruleBlock( mobileCss, diff --git a/packages/dashboard/app/components/AgentDetailView.css b/packages/dashboard/app/components/AgentDetailView.css index cc0c34fe1f..3efe2bb458 100644 --- a/packages/dashboard/app/components/AgentDetailView.css +++ b/packages/dashboard/app/components/AgentDetailView.css @@ -1,15 +1,22 @@ /* === Agent Detail Modal === */ -.agent-detail-overlay { - position: fixed; - inset: 0; - background: color-mix(in srgb, var(--bg) 60%, transparent); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 100; - padding: var(--space-lg); -} +/* +FNXC:ModalTouchGeometry 2026-07-30-23:55: +`.agent-detail-overlay` is DELETED — nothing has rendered it since FN-8619 moved Agent Detail onto +FloatingWindow, whose `modal` host owns the scrim (`.floating-window-overlay--modal`). + +It defined a fixed, blurred, flex-centred backdrop, and a mobile rule below reset its padding and +stretched its alignment. Neither is a lost feature: FloatingWindow's overlay is `position: fixed; +inset: 0` with no flex context, so those declarations had nothing to act on — it positions the panel +by geometry instead. + +Deleting it was blocked on one real question: two containment guards +(`dashboard-overflow-containment`, `mobile-horizontal-pan-containment`) pinned a selector list naming +this class, and if that list were the mechanism keeping modal scrims inside mobile pan containment, +removing the entry would open a hole. MEASURED: it is not. The lockdown lives on the global mobile +`html, body` block in styles.css (`overflow-x: hidden`, `overscroll-behavior-x: none`, +`touch-action: pan-y`); the per-overlay list only reasserts it for overlays that are themselves +scroll containers. FloatingWindow.css says the same in its own note at the mobile breakpoint. +*/ .agent-detail-modal { background: var(--surface); @@ -1780,11 +1787,6 @@ Agent Settings composes native inputs, buttons, editors, and portaled controls. Keep its inner modal panel container-sized there; only true phones take over the viewport. */ @media (max-width: 767.98px) { - .agent-detail-overlay { - padding: 0; - align-items: stretch; - } - .agent-detail-modal { /* Reset the desktop min-width: 480px / min-height: 320px — otherwise the fullscreen mobile sheet can still overflow narrow viewports. The diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css index 2c117cb45e..e34010fe2a 100644 --- a/packages/dashboard/app/styles.css +++ b/packages/dashboard/app/styles.css @@ -716,7 +716,6 @@ html .column.drag-over * { transition: none !important; } -[data-theme="light"] .agent-detail-overlay, [data-theme="light"] .agent-dialog-overlay, [data-theme="light"] .chat-new-dialog-backdrop { background: transparent; @@ -3780,7 +3779,6 @@ Toast text must contrast its status background across every dashboard theme and /* Modal: full-screen on mobile (cross-cutting overlay/modal base chrome) */ .modal-overlay:not(.confirm-dialog-overlay), - .agent-detail-overlay, .agent-dialog-overlay, .workflow-output-modal-overlay { padding-top: 0;