FN-7585: unify border, radius, and height across task-detail Priority/Execution-mode/Oversight controls
Unifies the visual styling of the task-detail modal's Priority, Execution-mode, and Oversight quick-control chips so the cluster reads as one consistent control group. - Add a shared --detail-control-border-radius token (resolving to --radius-md) alongside the existing --detail-priority-control-min-height token - Override .detail-priority-chip's inherited transparent border with a visible --btn-border-width/--border pairing so the "normal" priority level renders as a bordered box instead of borderless text - Pin the same border-width/color/radius trio on .detail-execution-mode-toggle so a future change to .btn defaults can't desync the cluster - Apply the same trio to .detail-oversight-chip, overriding .card-oversight-badge's transparent border (covers the neutral "off" tint too) - Apply the same trio to the mobile .detail-oversight-menu-trigger swap-in so the mobile overflow-trigger variant matches the desktop chip - Add a changeset (patch) documenting the fix for @runfusion/fusion - Extend TaskDetailModal.responsive-and-dependencies.test.tsx coverage for the unified styling Files changed: .changeset/FN-7585-unify-task-detail-quick-control-styling.md | 7 +++ packages/dashboard/app/components/TaskDetailModal.css | 55 ++++++++++++++++++++++ packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx | 27 +++++++++++ 3 files changed, 89 insertions(+) Fusion-Task-Id: FN-7585 Fusion-Task-Lineage: 0cca8c82-c9fb-4410-af48-51861a743f96 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
summary: Unify border, radius, and height of the task-detail Priority/Execution/Oversight controls.
|
||||
category: fix
|
||||
dev: Adds a shared --detail-control-border-radius token alongside --detail-priority-control-min-height so .detail-priority-chip, .detail-execution-mode-toggle, .detail-oversight-chip, and .detail-oversight-menu-trigger all resolve the same border-width/color/radius/height.
|
||||
@@ -370,8 +370,23 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P
|
||||
/*
|
||||
FNXC:TaskDetail 2026-06-22-20:00:
|
||||
Priority chip and speed (execution-mode) toggle share one min-height token so they render at identical, equal height. Reduced from the old calc(space-2xl + space-xs) (~too tall) to a compact 30px that stays legible and tappable. Both controls also get trimmed vertical padding to match.
|
||||
|
||||
FNXC:TaskDetail 2026-07-05-00:00:
|
||||
FN-7585 — Priority, Execution-mode, and Oversight (both the desktop chip and
|
||||
the mobile overflow-trigger variant) previously diverged: Priority inherited
|
||||
`.card-priority-badge`'s pill radius with a *transparent* border (so the
|
||||
common `normal` level rendered as borderless text), while Execution-mode and
|
||||
the Oversight mobile trigger are `.btn.btn-sm` pills with `--radius-md` and a
|
||||
visible `--border` color. Add one shared `--detail-control-border-radius`
|
||||
token here so all four controls resolve the same border-radius from a single
|
||||
source; each control below also pins the same `--btn-border-width` width and
|
||||
`--border` color so the cluster reads as one uniform control group. Only the
|
||||
border/radius/size are unified — per-level tint backgrounds (priority
|
||||
low/high/urgent, oversight observe/steer/autonomous/off, execution-mode
|
||||
fast) are untouched.
|
||||
*/
|
||||
--detail-priority-control-min-height: 30px;
|
||||
--detail-control-border-radius: var(--radius-md);
|
||||
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
@@ -384,6 +399,16 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P
|
||||
min-height: var(--detail-priority-control-min-height);
|
||||
padding-block: var(--space-xs);
|
||||
box-sizing: border-box;
|
||||
/*
|
||||
FNXC:TaskDetail 2026-07-05-00:00:
|
||||
FN-7585 — override `.card-priority-badge`'s transparent border with a real,
|
||||
visible border so the `normal` level (no `--low/--high/--urgent` tint) still
|
||||
renders as a bordered box instead of borderless text, matching the
|
||||
Execution-mode toggle and Oversight chip/trigger.
|
||||
*/
|
||||
border-width: var(--btn-border-width);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--detail-control-border-radius);
|
||||
}
|
||||
|
||||
.detail-priority-chip--saving {
|
||||
@@ -425,6 +450,15 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P
|
||||
min-height: var(--detail-priority-control-min-height);
|
||||
padding-block: var(--space-xs);
|
||||
box-sizing: border-box;
|
||||
/*
|
||||
FNXC:TaskDetail 2026-07-05-00:00:
|
||||
FN-7585 — pin the same shared border/radius token set as the Priority and
|
||||
Oversight controls even though `.btn` already applies a border, so a future
|
||||
change to `.btn`'s defaults cannot silently desync this cluster.
|
||||
*/
|
||||
border-width: var(--btn-border-width);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--detail-control-border-radius);
|
||||
}
|
||||
|
||||
.detail-execution-mode-toggle svg {
|
||||
@@ -461,12 +495,23 @@ already declares (see TaskCard.css) so oversight-level color stays a single
|
||||
semantic source, and the same `--detail-priority-control-min-height` chip
|
||||
height token as the priority/execution-mode controls above so the cluster
|
||||
renders at a uniform height.
|
||||
|
||||
FNXC:TaskDetail 2026-07-05-00:00:
|
||||
FN-7585 — like `.detail-priority-chip`, override `.card-oversight-badge`'s
|
||||
transparent border with the shared `--btn-border-width`/`--border`/
|
||||
`--detail-control-border-radius` trio so every oversight level (including
|
||||
`--off`, which has a neutral tint) renders the same bordered box as Priority
|
||||
and Execution-mode. The mobile `.detail-oversight-menu-trigger` swap below
|
||||
gets the identical trio so both oversight variants match.
|
||||
*/
|
||||
.detail-oversight-chip {
|
||||
gap: var(--space-xs);
|
||||
min-height: var(--detail-priority-control-min-height);
|
||||
padding-block: var(--space-xs);
|
||||
box-sizing: border-box;
|
||||
border-width: var(--btn-border-width);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--detail-control-border-radius);
|
||||
}
|
||||
|
||||
.detail-oversight-chip--saving {
|
||||
@@ -613,6 +658,16 @@ since the trigger lives in the header cluster rather than the footer, unlike
|
||||
min-height: var(--detail-priority-control-min-height);
|
||||
padding-block: var(--space-xs);
|
||||
box-sizing: border-box;
|
||||
/*
|
||||
FNXC:TaskDetail 2026-07-05-00:00:
|
||||
FN-7585 — mobile swap-in for `.detail-oversight-chip` (JS `isOversightMenuMobile`
|
||||
swap in TaskDetailModal.tsx). Pin the same shared border/radius trio so the
|
||||
mobile overflow-trigger variant matches the desktop chip and the
|
||||
Priority/Execution-mode controls, per the FN-7585 surface enumeration.
|
||||
*/
|
||||
border-width: var(--btn-border-width);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--detail-control-border-radius);
|
||||
}
|
||||
|
||||
.detail-oversight-menu-trigger svg {
|
||||
|
||||
@@ -226,6 +226,33 @@ describe("TaskDetailModal", () => {
|
||||
expect(css).not.toMatch(/@media \(max-width: 640px\)\s*\{[^}]*\.detail-meta-inline-controls\s*\{[^}]*flex-direction:\s*column;/);
|
||||
});
|
||||
|
||||
it("unifies border/radius/height across the Priority, Execution-mode, and Oversight quick controls (FN-7585)", () => {
|
||||
const css = readDashboardStylesSource();
|
||||
|
||||
const inlineControlsBlock = getStandaloneCssRuleBlock(css, ".detail-meta-inline-controls");
|
||||
const priorityChipBlock = getExactCssRuleBlock(css, ".detail-priority-chip");
|
||||
const executionToggleBlock = getExactCssRuleBlock(css, ".detail-execution-mode-toggle");
|
||||
const oversightChipBlock = getExactCssRuleBlock(css, ".detail-oversight-chip");
|
||||
const oversightTriggerBlock = getExactCssRuleBlock(css, ".detail-oversight-menu-trigger");
|
||||
|
||||
// The cluster declares one shared border-radius token; all four controls
|
||||
// must reference it rather than four independent literal radii.
|
||||
expect(inlineControlsBlock).toContain("--detail-control-border-radius: var(--radius-md);");
|
||||
for (const block of [priorityChipBlock, executionToggleBlock, oversightChipBlock, oversightTriggerBlock]) {
|
||||
expect(block).toContain("border-radius: var(--detail-control-border-radius);");
|
||||
expect(block).toContain("border-width: var(--btn-border-width);");
|
||||
expect(block).toContain("border-color: var(--border);");
|
||||
// Same height token as the rest of the invariant.
|
||||
expect(block).toContain("min-height: var(--detail-priority-control-min-height);");
|
||||
expect(block).toContain("box-sizing: border-box;");
|
||||
}
|
||||
|
||||
// Guard against regressing back to four independent literal radius values
|
||||
// (e.g. reintroducing a bare `var(--radius-pill)` on only the chips).
|
||||
expect(priorityChipBlock).not.toMatch(/border-radius:\s*var\(--radius-pill\)/);
|
||||
expect(oversightChipBlock).not.toMatch(/border-radius:\s*var\(--radius-pill\)/);
|
||||
});
|
||||
|
||||
it("keeps grouped timestamp metadata inline on desktop and mobile", () => {
|
||||
const css = readDashboardStylesSource();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user