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

FN-7889: align task card header action icons to the id's optical centerline

Browse Source 
Vertically nudges the card-header-actions cluster (size badge/menu icons) to share the same optical centerline as the mono task id, matching the existing id nudge.

- Add a translateY(calc(var(--space-xs) / 4)) transform to .card-header-actions in TaskCard.css, mirroring the FN-7871 id nudge
- Document the change with an FNXC comment explaining the FN-7889 requirement and its relationship to FN-7871/FN-7862/FN-7837
- Extend the TaskCard.badge-wrap.test.tsx regression test to assert the actions cluster's transform matches the id's transform and stays tokenized (no raw px values)

Files changed:
 packages/dashboard/app/components/TaskCard.css                      | 6 +++++-
 .../dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-7889

Fusion-Task-Lineage: d4743b8f-c7d7-4c3b-9b68-f632dd6e0b7b

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-12 18:06:38 -07:00
parent db9a9453db
commit c341b58bde
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/components/TaskCard.css
View File

@@ -1433,7 +1433,10 @@ executing. These map 1:1 to the unified progress status so the dot color encodes
cursor: not-allowed;
}
/* Card header actions container - groups size badge and buttons on the right */
/*
FNXC:TaskCardLayout 2026-07-12-00:00:
FN-7889 requires the right-side size/menu icons and action chips to share the mono task id's optical centerline. Mirror FN-7871's token-derived id nudge on the whole right cluster while preserving FN-7862's flex-start first-row anchor and FN-7837's middle-badge wrap/size-chip-not-orphaned contract.
*/
.card-header-actions {
display: flex;
align-items: center;
@@ -1442,6 +1445,7 @@ executing. These map 1:1 to the unified progress status so the dot color encodes
gap: var(--space-xs);
min-height: var(--card-chip-height);
margin-left: auto;
transform: translateY(calc(var(--space-xs) / 4));
}
/* Edit button - visible on hover */

4
packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx
View File

@@ -76,6 +76,7 @@ function expectSharedHeaderBaseline(container: HTMLElement) {
expect(idStyles.transform).toMatch(centeredIdNudgePattern);
expect(actionsStyles.display).toBe("flex");
expect(actionsStyles.alignItems).toBe("center");
expect(actionsStyles.transform).toBe(idStyles.transform);
expect(actionsStyles.minHeight).toMatch(resolvedChipHeightPattern);
expect(actionsStyles.marginLeft).toBe("auto");
expect(actionsStyles.flex).toBe("0 0 auto");
@@ -271,10 +272,13 @@ describe("TaskCard badge wrapping (FN-5162)", () => {
it("keeps the centered-id nudge and mobile header rhythm tokenized with the badge-wrap contract", () => {
const cardIdRule = loadedCss.match(/\.card-id\s*\{(?<body>[^}]*)\}/)?.groups?.body ?? "";
const actionsRule = loadedCss.match(/\.card-header-actions\s*\{(?<body>[^}]*)\}/)?.groups?.body ?? "";
expect(cardIdRule).toContain("min-height: var(--card-chip-height);");
expect(cardIdRule).toContain("line-height: 1;");
expect(cardIdRule).toContain("transform: translateY(calc(var(--space-xs) / 4));");
expect(cardIdRule).not.toMatch(/translateY\(\d/);
expect(actionsRule).toContain("transform: translateY(calc(var(--space-xs) / 4));");
expect(actionsRule).not.toMatch(/translateY\(\d/);
expect(loadedCss).toContain(".card-id,\n .card-header-badges,\n .card-header-actions");
expect(loadedCss).toContain("min-height: var(--card-chip-height-mobile);");
});