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