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

FN-8253: align task size badge with header badges

Browse Source 
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) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-17 17:33:19 -07:00
parent e24f765495
commit 204bf8afa8
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);

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

@@ -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*\{(?<body>[^}]*)\}/)?.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*\{/);