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>
42 lines
1.3 KiB
CSS
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; } }
|