From 79239779ccc90022a14452b3bc80b252d176a597 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sat, 27 Jun 2026 23:30:38 -0700 Subject: [PATCH] FN-7171: fix Create PR commit preview layout Keep the Create PR preview readable by aligning commit rows to their DOM order. - Split commit-row and file-row grid templates so commit SHAs use a fixed content column. - Prevent short commit SHAs from wrapping while leaving subjects in the flexible column. - Add tests covering commit preview row ordering, empty commit hints, and file-row layout. - Add a patch changeset for the published Fusion package. Files changed: .changeset/fn-7171-pr-preview-commit-layout.md | 7 +++ .../dashboard/app/components/PrCreateModal.css | 14 +++++- .../components/__tests__/PrCreateModal.test.tsx | 55 ++++++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-7171 Fusion-Task-Lineage: e0fe2ac5-1087-4a54-b60e-673c7b980780 Co-authored-by: Fusion (runfusion.ai) --- .../fn-7171-pr-preview-commit-layout.md | 7 +++ .../app/components/PrCreateModal.css | 14 ++++- .../__tests__/PrCreateModal.test.tsx | 55 +++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 .changeset/fn-7171-pr-preview-commit-layout.md diff --git a/.changeset/fn-7171-pr-preview-commit-layout.md b/.changeset/fn-7171-pr-preview-commit-layout.md new file mode 100644 index 0000000000..457b289fc5 --- /dev/null +++ b/.changeset/fn-7171-pr-preview-commit-layout.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Keep Create PR preview commit SHAs readable on one line. +category: fix +dev: Corrects the dashboard Create Pull Request commit-row grid and guards the DOM contract in tests. diff --git a/packages/dashboard/app/components/PrCreateModal.css b/packages/dashboard/app/components/PrCreateModal.css index 55434ac7db..4edc1e6495 100644 --- a/packages/dashboard/app/components/PrCreateModal.css +++ b/packages/dashboard/app/components/PrCreateModal.css @@ -218,15 +218,27 @@ .pr-create-modal__commit-row, .pr-create-modal__file-row { display: grid; - grid-template-columns: 1fr auto auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--btn-border-width) solid color-mix(in srgb, var(--border) 70%, transparent); } +/* +FNXC:CreatePrModal 2026-06-27-22:35: +Commit preview rows render DOM order as SHA, subject, author. The grid must mirror that order so the short SHA keeps content width, the subject owns the flexible column, and nowrap prevents overflow-wrap:anywhere from turning the SHA vertical. +*/ +.pr-create-modal__commit-row { + grid-template-columns: auto 1fr auto; +} + +.pr-create-modal__file-row { + grid-template-columns: 1fr auto auto; +} + .pr-create-modal__commit-row code { color: var(--text-muted); + white-space: nowrap; } .pr-create-modal__commit-row > *, diff --git a/packages/dashboard/app/components/__tests__/PrCreateModal.test.tsx b/packages/dashboard/app/components/__tests__/PrCreateModal.test.tsx index 448445cd03..d41a8cdb64 100644 --- a/packages/dashboard/app/components/__tests__/PrCreateModal.test.tsx +++ b/packages/dashboard/app/components/__tests__/PrCreateModal.test.tsx @@ -169,6 +169,61 @@ describe("PrCreateModal", () => { expect(screen.getByText(/using/i)).toBeInTheDocument(); }); + it("renders commit preview rows in SHA, subject, author order", async () => { + const commits = [ + { + sha: "1234567890abcdef1234567890abcdef12345678", + subject: "feat: add a very long subject that should use the flexible column instead of forcing the short SHA to wrap", + author: "A very long author name that remains in the trailing column", + }, + { + sha: "abcdef0123456789abcdef0123456789abcdef01", + subject: "fix: keep another subject readable", + author: "dev", + }, + ]; + mocks.fetchPrPreflight.mockResolvedValueOnce({ + ...preflight, + commits, + changedFiles: [ + { path: "src/very/long/path/that/should/still/use/the/file-row-flex-column.ts", additions: 10, deletions: 2, status: "modified" as const }, + ], + }); + + renderModal(); + expect(await screen.findByDisplayValue("AI title")).toBeInTheDocument(); + + const rows = Array.from(document.querySelectorAll(".pr-create-modal__commit-row")); + expect(rows).toHaveLength(commits.length); + rows.forEach((row, index) => { + const codeCells = row.querySelectorAll("code"); + expect(codeCells).toHaveLength(1); + expect(codeCells[0]).toHaveTextContent(commits[index]!.sha.slice(0, 7)); + expect(row.children).toHaveLength(3); + expect(row.children[0]).toBe(codeCells[0]); + expect(row.children[0]).toHaveTextContent(commits[index]!.sha.slice(0, 7)); + expect(row.children[1]).toHaveTextContent(commits[index]!.subject); + expect(row.children[2]).toHaveTextContent(commits[index]!.author); + }); + + const fileRow = document.querySelector(".pr-create-modal__file-row"); + expect(fileRow?.children[0]).toHaveTextContent("src/very/long/path/that/should/still/use/the/file-row-flex-column.ts"); + expect(fileRow?.children[1]).toHaveTextContent("+10 / −2"); + expect(fileRow?.children[2]).toHaveTextContent("modified"); + }); + + it("renders empty commit hint without commit rows", async () => { + mocks.fetchPrPreflight.mockResolvedValueOnce({ + ...preflight, + commitsPresent: false, + commits: [], + }); + + renderModal(); + expect(await screen.findByText("No commits found.")).toBeInTheDocument(); + expect(document.querySelectorAll(".pr-create-modal__commit-row")).toHaveLength(0); + }); + it("renders preflight and options before metadata resolves", async () => { const metadataDeferred = createDeferred(); mocks.generatePrMetadata.mockReturnValueOnce(metadataDeferred.promise);