From c341b58bde118cb6e82fad15c828516f9aed658e Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 12 Jul 2026 18:06:38 -0700 Subject: [PATCH] FN-7889: align task card header action icons to the id's optical centerline 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) --- packages/dashboard/app/components/TaskCard.css | 6 +++++- .../app/components/__tests__/TaskCard.badge-wrap.test.tsx | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/dashboard/app/components/TaskCard.css b/packages/dashboard/app/components/TaskCard.css index fda9b3961b..fcef0e2032 100644 --- a/packages/dashboard/app/components/TaskCard.css +++ b/packages/dashboard/app/components/TaskCard.css @@ -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 */ diff --git a/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx index fd1d6f77ba..ca69ebb5ce 100644 --- a/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx @@ -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*\{(?[^}]*)\}/)?.groups?.body ?? ""; + const actionsRule = loadedCss.match(/\.card-header-actions\s*\{(?[^}]*)\}/)?.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);"); });