From 204bf8afa8fea4776ed35eb0989b969d1b975ddf Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Fri, 17 Jul 2026 17:33:19 -0700 Subject: [PATCH] FN-8253: align task size badge with header badges Align task-card size badge geometry with its sibling header badges. - Center the size badge and inherit shared header-badge height. - Cover desktop and mobile badge-height behavior with CSS assertions. Files changed: packages/dashboard/app/components/TaskCard.css | 11 +++++------ .../app/components/__tests__/TaskCard.badge-wrap.test.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 8 deletions(-) Fusion-Task-Id: FN-8253 Fusion-Task-Lineage: 63a64d62-12b3-4b53-a05e-1df7406ab222 Co-authored-by: Fusion (runfusion.ai) --- packages/dashboard/app/components/TaskCard.css | 11 +++++------ .../components/__tests__/TaskCard.badge-wrap.test.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/dashboard/app/components/TaskCard.css b/packages/dashboard/app/components/TaskCard.css index d5dbd7ed14..22dda71e1e 100644 --- a/packages/dashboard/app/components/TaskCard.css +++ b/packages/dashboard/app/components/TaskCard.css @@ -531,13 +531,13 @@ FN-6774 removes the saturated stuck-task edge stripe from board cards. Keep the } /* -FNXC:TaskCardLayout 2026-07-17-13:05 (FN-8234): -As a direct header child after .card-id, the size chip uses the shared desktop chip height so its baseline stays aligned with the id and trailing actions. Its existing color coding remains unchanged. +FNXC:TaskCardLayout 2026-07-17-14:00 (FN-8253): +As a direct header child after .card-id, the size chip must match sibling header-badge height rather than use a bespoke chip-height minimum. Center it on the header row to preserve its baseline alignment with the id and trailing actions. Its existing color coding remains unchanged. */ .card-size-badge { + align-self: center; flex-shrink: 0; box-sizing: border-box; - min-height: var(--card-chip-height); letter-spacing: 0.5px; } @@ -1825,11 +1825,10 @@ The three-dot menu is the sole card move/action entry point. Keep this shared bu } /* - FNXC:TaskCardLayout 2026-07-17-13:05 (FN-8234): - Keep the direct id-adjacent size chip on the mobile chip-height row with the wrapping badges and trailing actions, preserving the non-wrapping header baseline at narrow and short-landscape breakpoints. + FNXC:TaskCardLayout 2026-07-17-14:00 (FN-8253): + At narrow and short-landscape breakpoints, the id, wrapping badge group, and trailing actions retain the mobile chip-height row. The direct id-adjacent size chip instead derives its height from shared badge geometry so it matches sibling header badges while its centered alignment preserves the non-wrapping header baseline. */ .card-id, - .card-size-badge, .card-header-badges, .card-header-actions { min-height: var(--card-chip-height-mobile); 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 027124954a..73b445174b 100644 --- a/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx @@ -515,10 +515,17 @@ describe("TaskCard badge wrapping (FN-5162)", () => { expect(actionsRule).toContain("overflow: visible;"); expect(actionsRule).toContain("transform: translateY(calc(var(--space-xs) / 4));"); expect(actionsRule).not.toMatch(/translateY\(\d/); - expect(loadedCss).toContain(".card-id,\n .card-size-badge,\n .card-header-badges,\n .card-header-actions"); + expect(loadedCss).toContain(".card-id,\n .card-header-badges,\n .card-header-actions"); expect(loadedCss).toContain("min-height: var(--card-chip-height-mobile);"); }); + it("derives the size badge height from shared header-badge geometry", () => { + const sizeBadgeRule = loadedCss.match(/\.card-size-badge\s*\{(?[^}]*)\}/)?.groups?.body ?? ""; + + expect(sizeBadgeRule).toContain("align-self: center;"); + expect(sizeBadgeRule).not.toContain("min-height:"); + }); + it("locks the mobile three-dot menu, size, and Promote controls to the card rhythm", () => { const mobileSection = getCssBlocks(loadedCss, "max-width: 768px").join("\n"); const menuTouchSection = getCssBlocks(loadedCss, "max-height: 480px").join("\n"); @@ -529,7 +536,7 @@ describe("TaskCard badge wrapping (FN-5162)", () => { expectCssRuleToContain(mobileSection, ".card-header-actions", "overflow: visible;"); expectCssRuleToContain(mobileSection, ".card-header-actions", "align-items: center;"); expectCssRuleToContain(mobileSection, ".card-header-actions", "gap: calc(var(--space-xs) / 2);"); - // Task id, its adjacent size chip, and trailing actions share the locked mobile chip row. + // Task id and trailing actions share the locked mobile chip row; the size chip uses shared badge geometry. expectCssRuleToContain(mobileSection, ".card-id", "height: var(--card-chip-height-mobile);"); expectCssRuleToContain(mobileSection, ".card-id", "max-height: var(--card-chip-height-mobile);"); expect(mobileSection).not.toMatch(/\.card-send-back\s*\{/);