+ {/* Version tags live in their own stable column, left of the DAG. */}
+
- {/* Ref badges */}
- {row.commit.refs.length > 0 && (
-
- {row.commit.refs.map((ref) => (
+ {/* Branch refs stay beside the graph in the existing refs zone. */}
+ {branchRefs.length > 0 && (
+
+ {branchRefs.map((ref) => (
{ref}
diff --git a/frontend/src/features/git/gitGraphView.test.tsx b/frontend/src/features/git/gitGraphView.test.tsx
index e2c5efe9..44390c91 100644
--- a/frontend/src/features/git/gitGraphView.test.tsx
+++ b/frontend/src/features/git/gitGraphView.test.tsx
@@ -10,7 +10,7 @@
* - Clicking close hides the detail panel.
*/
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
import { render, screen, waitFor, fireEvent } from "@testing-library/react";
import { MockGitGateway } from "@/adapters/mock";
@@ -22,7 +22,7 @@ import { GitGraphView } from "./GitGraphView";
// Helpers
// ---------------------------------------------------------------------------
-function renderView(git: MockGitGateway = new MockGitGateway()) {
+function renderView(git: unknown = new MockGitGateway()) {
const gateways = { git } as unknown as Gateways;
return render(
@@ -71,6 +71,10 @@ describe("GitGraphView", () => {
expect(tagBadge).toBeTruthy();
// Tag badge should have the warning colour class
expect(tagBadge.className).toMatch(/warning/);
+ const tagCell = screen.getByTestId("git-tags-cell-aaaaaaaa");
+ expect(tagCell.textContent).toContain("tag: v1.0");
+ expect(tagCell.style.width).toBe("112px");
+ expect(tagBadge.className).toMatch(/truncate/);
});
it("shows 'feature' branch badge", async () => {
@@ -82,6 +86,29 @@ describe("GitGraphView", () => {
expect(featureBadge.className).toMatch(/primary/);
});
+ it("keeps tags in the left tag column and branches in the refs zone", async () => {
+ renderView({
+ graph: vi.fn(async () => [
+ {
+ hash: "1111111111111111111111111111111111111111",
+ summary: "Release build",
+ parents: [],
+ refs: ["main", "tag: v2026.08.14-long-release-name"],
+ author: "Alice",
+ timestamp: 1_717_200_000,
+ },
+ ]),
+ });
+ await waitForCommits();
+
+ const tagCell = screen.getByTestId("git-tags-cell-11111111");
+ const branchCell = screen.getByTestId("git-branch-refs-cell-11111111");
+ expect(tagCell.textContent).toContain("tag: v2026.08.14-long-release-name");
+ expect(tagCell.textContent).not.toContain("main");
+ expect(branchCell.textContent).toContain("main");
+ expect(branchCell.textContent).not.toContain("tag: v2026.08.14-long-release-name");
+ });
+
it("clicking a commit row opens the detail panel", async () => {
renderView();
await waitForCommits();