FN-7846: move task card size badge to the right edge of header actions
Repositions the S/M/L size badge on task cards so it is the trailing element in the header-actions cluster, aligning its right margin with the card's top padding instead of leaving it stranded before the menu button. - Move the `card-size-badge` span to render after the more-actions menu button within `.card-header-actions` in TaskCard.tsx - Add FNXC layout comment documenting why the badge must be last (right-edge alignment while preserving FN-7837 no-orphaned-second-row grouping) - Add a regression test asserting the size badge is the last child of `.card-header-actions` with no trailing sibling - Add a patch changeset documenting the fix for release notes Files changed: .changeset/FN-7846-card-size-badge-right-edge.md | 7 +++++++ packages/dashboard/app/components/TaskCard.tsx | 14 +++++++++----- .../app/components/__tests__/TaskCard.test.tsx | 21 +++++++++++++++++++++ 3 files changed, 37 insertions(+), 5 deletions(-) Fusion-Task-Id: FN-7846 Fusion-Task-Lineage: ee2c1864-e0fe-4d82-a280-59edbb923dca Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/FN-7846-card-size-badge-right-edge.md
Normal file
7
.changeset/FN-7846-card-size-badge-right-edge.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
summary: Task card size badge (S/M/L) now sits flush against the card's right edge.
|
||||||
|
category: fix
|
||||||
|
dev: Renders `.card-size-badge` as the last child of `.card-header-actions` in TaskCard so its right margin equals the card's top padding (FN-7846).
|
||||||
@@ -3279,11 +3279,6 @@ function TaskCardComponent({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{task.size && (
|
|
||||||
<span className={`card-size-badge size-${task.size.toLowerCase()}`}>
|
|
||||||
{task.size}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{/*
|
{/*
|
||||||
FNXC:TaskCardMenu 2026-07-10-12:00:
|
FNXC:TaskCardMenu 2026-07-10-12:00:
|
||||||
Visible entry point for the card's action menu (Edit/Delete/Review/New chat/Interventions…)
|
Visible entry point for the card's action menu (Edit/Delete/Review/New chat/Interventions…)
|
||||||
@@ -3307,6 +3302,15 @@ function TaskCardComponent({
|
|||||||
<MoreHorizontal size={14} />
|
<MoreHorizontal size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
{/*
|
||||||
|
FNXC:TaskCardLayout 2026-07-11-00:00 (FN-7846):
|
||||||
|
The size badge must be the last item in the right-aligned header-actions cluster so its right edge uses the card's `--card-padding`, matching the top margin on desktop and mobile while preserving the FN-7837 no-orphaned-second-row grouping.
|
||||||
|
*/}
|
||||||
|
{task.size && (
|
||||||
|
<span className={`card-size-badge size-${task.size.toLowerCase()}`}>
|
||||||
|
{task.size}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3476,6 +3476,27 @@ describe("TaskCard", () => {
|
|||||||
expect(actionsContainer?.contains(sizeBadge)).toBe(true);
|
expect(actionsContainer?.contains(sizeBadge)).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("renders size badge as the right-most header action after trailing controls", () => {
|
||||||
|
const { container } = render(
|
||||||
|
<TaskCard
|
||||||
|
task={makeTask({ column: "in-progress", status: "executing" as any, size: "M" })}
|
||||||
|
onOpenDetail={noop}
|
||||||
|
addToast={noop}
|
||||||
|
onPauseTask={async () => makeTask({ paused: true })}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
const actionsContainer = container.querySelector(".card-header-actions") as HTMLElement | null;
|
||||||
|
const menuButton = container.querySelector(".card-menu-btn");
|
||||||
|
const sizeBadge = container.querySelector(".card-size-badge");
|
||||||
|
|
||||||
|
expect(actionsContainer).not.toBeNull();
|
||||||
|
expect(menuButton).not.toBeNull();
|
||||||
|
expect(sizeBadge).not.toBeNull();
|
||||||
|
expect(actionsContainer?.contains(menuButton)).toBe(true);
|
||||||
|
expect(actionsContainer?.lastElementChild).toBe(sizeBadge);
|
||||||
|
expect(sizeBadge?.nextElementSibling).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
it("places card-header-actions as a direct header child after the wrapped badge group", () => {
|
it("places card-header-actions as a direct header child after the wrapped badge group", () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<TaskCard
|
<TaskCard
|
||||||
|
|||||||
Reference in New Issue
Block a user