root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): retire the dead .agent-detail-overlay CSS (#2915) (#2985)

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-07-30 23:24:33 -07:00
committed by GitHub
parent 94df80bbd6
commit d541c3154e
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/app/__tests__/dashboard-overflow-containment.test.tsx
View File

@@ -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");

2
packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts
View File

@@ -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,

34
packages/dashboard/app/components/AgentDetailView.css
View File

@@ -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

2
packages/dashboard/app/styles.css
View File

@@ -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;