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) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-06-27 23:30:38 -07:00
parent f7e20abe9f
commit 79239779cc
3 changed files with 75 additions and 1 deletions

View File

@@ -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.

View File

@@ -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 > *,

View File

@@ -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<HTMLDivElement>(".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<typeof metadata>();
mocks.generatePrMetadata.mockReturnValueOnce(metadataDeferred.promise);