From 9ac4da07943c60c460804c347bcbdee66c32db99 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sat, 11 Jul 2026 22:40:49 -0700
Subject: [PATCH] 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>
---
 .../FN-7846-card-size-badge-right-edge.md     |  7 +++++++
 .../dashboard/app/components/TaskCard.tsx     | 14 ++++++++-----
 .../components/__tests__/TaskCard.test.tsx    | 21 +++++++++++++++++++
 3 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/FN-7846-card-size-badge-right-edge.md

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({
               )}
             </div>
           )}
-          {task.size && (
-            <span className={`card-size-badge size-${task.size.toLowerCase()}`}>
-              {task.size}
-            </span>
-          )}
           {/*
           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({
               <MoreHorizontal size={14} />
             </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>
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(
+      <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", () => {
     const { container } = render(
       <TaskCard