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(