From 6aa17b0444be4f014d2ecc5658ae0b316d05f7b5 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Tue, 9 Jun 2026 14:40:27 -0700
Subject: [PATCH] FN-6129: right-align promote action on task cards

Keep the promote action pinned to the right edge of task card action rows.

- add `margin-left: auto` to the promote action send-back button styling
- preserve right alignment for the mobile action row breakpoint
- add TaskCard coverage for solo and multi-action mobile layouts

Files changed:
 packages/dashboard/app/components/TaskCard.css     |  5 +++
 packages/dashboard/app/components/__tests__/TaskCard.test.tsx     | 40 ++++++++++++++++++++++
 2 files changed, 45 insertions(+)

Fusion-Task-Id: FN-6129
Fusion-Task-Lineage: 70aed0c1-b007-4a71-9755-04535b630888
---
 .../dashboard/app/components/TaskCard.css     |  5 +++
 .../components/__tests__/TaskCard.test.tsx    | 40 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/packages/dashboard/app/components/TaskCard.css b/packages/dashboard/app/components/TaskCard.css
index 5afe995f06..6060fb964e 100644
--- a/packages/dashboard/app/components/TaskCard.css
+++ b/packages/dashboard/app/components/TaskCard.css
@@ -1299,6 +1299,7 @@
 .card-promote-action.card-send-back-btn {
   gap: var(--space-xs);
   padding: var(--space-xs) var(--space-sm);
+  margin-left: auto;
   border: var(--btn-border-width) solid color-mix(in srgb, var(--text-muted) 30%, transparent);
   background: color-mix(in srgb, var(--text-muted) 12%, transparent);
   color: var(--text);
@@ -1435,6 +1436,10 @@
     opacity: 1;
   }
 
+  .card-promote-action.card-send-back-btn {
+    margin-left: auto;
+  }
+
   /* Card: compact progress bar on narrow cards */
   .card-progress {
     gap: var(--space-xs);
diff --git a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
index 5ed7e9a56d..2922370fb5 100644
--- a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
+++ b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
@@ -4385,6 +4385,46 @@ describe("TaskCard mission badge", () => {
     expect(actionRow).not.toBeNull();
     expect(actionRow?.contains(promoteButton)).toBe(true);
     expect(css).toMatch(/\.card-promote-action\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
+    expect(css).toMatch(/\.card-promote-action\.card-send-back-btn\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
+  });
+
+  it("keeps the promote action right-aligned in the mobile card action row", () => {
+    const css = loadAllAppCss();
+    const onPromote = vi.fn().mockResolvedValue(undefined);
+
+    const soloRender = render(
+      <TaskCard
+        task={makeTask({ id: "FN-782", column: "todo" })}
+        onOpenDetail={noop}
+        addToast={noop}
+        onPromote={onPromote}
+      />,
+    );
+
+    const soloPromoteButton = screen.getByTestId("card-promote-FN-782");
+    expect(soloPromoteButton.closest(".card-action-row")?.children).toHaveLength(1);
+    expect(soloPromoteButton).toHaveClass("card-promote-action", "card-send-back-btn");
+    soloRender.unmount();
+
+    render(
+      <TaskCard
+        task={makeTask({ id: "FN-783", column: "in-review", paused: false, userPaused: false, prInfo: undefined as any })}
+        onOpenDetail={noop}
+        addToast={noop}
+        onPromote={onPromote}
+        prAuthAvailable={true}
+        autoMergeEnabled={false}
+      />,
+    );
+
+    const createPrButton = screen.getByRole("button", { name: "Create pull request" });
+    const promoteButton = screen.getByTestId("card-promote-FN-783");
+    const actionRow = promoteButton.closest(".card-action-row");
+
+    expect(actionRow).not.toBeNull();
+    expect(actionRow?.contains(createPrButton)).toBe(true);
+    expect(createPrButton.compareDocumentPosition(promoteButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(css).toMatch(/@media[^{}]*\(max-width:\s*768px\)[^{]*\{[\s\S]*?\.card-promote-action\.card-send-back-btn\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
   });
 
   it("calls onPromote without opening the card when promote is clicked", () => {