Files
fusion/packages/dashboard/app/components/ReportActionMenu.css
gsxdsm 8d216e628c FN-8431: give report menu an opaque background
Make the report action menu render on a defined opaque surface.

- Replace undefined menu color and spacing tokens with defined design tokens.
- Add regression coverage for opaque menu surfaces and token availability.
- Add a patch changeset for the report menu fix.

Files changed:
 .changeset/fn-8431-report-menu-background.md       |  7 ++++
 .../dashboard/app/components/ReportActionMenu.css  | 40 ++++++++++++++++++++--
 .../components/__tests__/ReportActionMenu.test.tsx | 17 +++++++++
 3 files changed, 61 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-8431

Fusion-Task-Lineage: d300b5ae-272c-452d-932d-8efeee30a0d9

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
2026-07-20 09:46:22 -07:00

42 lines
1.3 KiB
CSS

.report-action-menu { position: relative; }
/*
FNXC:ReportPipeline 2026-07-20-09:27:
FN-8431 replaces undefined --bg-elevated, --text-primary, --bg-hover, and numeric
spacing aliases left after FN-8406 portaled this menu. Like FN-6862's EngineControlMenu,
the shared System and Settings portal needs the defined opaque --card surface so page
content cannot show through its guided Report actions.
*/
.report-action-menu__list {
z-index: var(--z-dropdown);
display: grid;
gap: var(--space-xs);
min-inline-size: calc(var(--space-2xl) * 6);
padding: var(--space-sm);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--card);
box-shadow: var(--shadow-lg);
}
.report-action-menu__list--portal { position: fixed; }
.report-action-menu__item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border: 0;
border-radius: var(--radius-sm);
color: var(--text);
background: transparent;
text-align: left;
}
.report-action-menu__item:hover,
.report-action-menu__item:focus-visible { background: var(--surface-hover); }
.report-action-menu__item svg { inline-size: 1em; block-size: 1em; }
@media (max-width: 768px) { .report-action-menu__list--portal { right: auto !important; } }