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
This commit is contained in:
gsxdsm
2026-06-09 14:40:27 -07:00
parent 576ff7768a
commit 6aa17b0444
2 changed files with 45 additions and 0 deletions

View File

@@ -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);

View File

@@ -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", () => {