diff --git a/.changeset/FN-7846-card-size-badge-right-edge.md b/.changeset/FN-7846-card-size-badge-right-edge.md new file mode 100644 index 0000000000..8e482dd2b3 --- /dev/null +++ b/.changeset/FN-7846-card-size-badge-right-edge.md @@ -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). diff --git a/packages/dashboard/app/components/TaskCard.tsx b/packages/dashboard/app/components/TaskCard.tsx index c1d61d0cf8..153bcc2650 100644 --- a/packages/dashboard/app/components/TaskCard.tsx +++ b/packages/dashboard/app/components/TaskCard.tsx @@ -3279,11 +3279,6 @@ function TaskCardComponent({ )} )} - {task.size && ( - - {task.size} - - )} {/* FNXC:TaskCardMenu 2026-07-10-12:00: Visible entry point for the card's action menu (Edit/Delete/Review/New chat/Interventions…) @@ -3307,6 +3302,15 @@ function TaskCardComponent({ )} + {/* + 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 && ( + + {task.size} + + )} )} diff --git a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx index 515bc0ab04..66480933a2 100644 --- a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx @@ -3476,6 +3476,27 @@ describe("TaskCard", () => { expect(actionsContainer?.contains(sizeBadge)).toBe(true); }); + it("renders size badge as the right-most header action after trailing controls", () => { + const { container } = render( + 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", () => { const { container } = render(