fix: prevent filepath wrapping in diff panel (#1680)

Co-authored-by: reverb256 <reverb256@users.noreply.github.com>
Co-authored-by: JonathanLab <jonathanmieloo@gmail.com>
Co-authored-by: Jonathan Mieloo <32547391+jonathanlab@users.noreply.github.com>

Author: reverb256

apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx

@@ -0,0 +1,109 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@renderer/features/code-review/stores/reviewNavigationStore", () => ({
+  useReviewNavigationStore: vi.fn(),
+}));
+vi.mock("@features/code-editor/stores/diffViewerStore", () => ({
+  useDiffViewerStore: vi.fn(),
+}));
+vi.mock("@features/task-detail/components/ChangesPanel", () => ({
+  ChangesPanel: () => null,
+}));
+vi.mock("@features/git-interaction/utils/diffStats", () => ({
+  computeDiffStats: () => ({ linesAdded: 0, linesRemoved: 0 }),
+}));
+vi.mock("@stores/themeStore", () => ({
+  useThemeStore: vi.fn(() => ({ isDarkMode: false })),
+}));
+vi.mock("@pierre/diffs/react", () => ({
+  WorkerPoolContextProvider: ({ children }: { children: React.ReactNode }) =>
+    children,
+}));
+vi.mock("@pierre/diffs/worker/worker.js?worker&url", () => ({ default: "" }));
+vi.mock("@components/ui/FileIcon", () => ({
+  FileIcon: () => <span data-testid="file-icon" />,
+}));
+
+import { DeferredDiffPlaceholder, DiffFileHeader } from "./ReviewShell";
+
+type FileDiffMetadata = import("@pierre/diffs/react").FileDiffMetadata;
+
+function makeFileDiff(name: string): FileDiffMetadata {
+  return {
+    name,
+    prevName: null,
+    hunks: [{ additionLines: 3, deletionLines: 1 }],
+  } as unknown as FileDiffMetadata;
+}
+
+function findSpan(
+  container: HTMLElement,
+  match: (s: HTMLSpanElement) => boolean,
+): HTMLSpanElement {
+  const spans = Array.from(container.querySelectorAll<HTMLSpanElement>("span"));
+  const found = spans.find(match);
+  if (!found) throw new Error("span not found");
+  return found;
+}
+
+function renderHeader(path: string) {
+  const diff = render(
+    <DiffFileHeader
+      fileDiff={makeFileDiff(path)}
+      collapsed={false}
+      onToggle={() => {}}
+    />,
+  );
+  const deferred = render(
+    <DeferredDiffPlaceholder
+      filePath={path}
+      linesAdded={10}
+      linesRemoved={2}
+      reason="generated"
+      collapsed={false}
+      onToggle={() => {}}
+    />,
+  );
+  return { diff, deferred };
+}
+
+describe.each([
+  ["DiffFileHeader", "diff" as const],
+  ["DeferredDiffPlaceholder", "deferred" as const],
+])("%s", (_name, which) => {
+  it("renders the directory path and filename", () => {
+    const rendered = renderHeader(
+      "src/renderer/features/code-review/components/ReviewShell.tsx",
+    )[which];
+
+    const text = rendered.container.querySelector("button")?.textContent ?? "";
+    expect(text).toContain("src/renderer/features/code-review/components/");
+    expect(text).toContain("ReviewShell.tsx");
+  });
+
+  it("truncates the directory path and keeps the filename intact", () => {
+    const rendered = renderHeader(
+      "src/a/very/deeply/nested/structure/ReviewShell.tsx",
+    )[which];
+
+    const dirSpan = findSpan(
+      rendered.container,
+      (s) => s.style.color === "var(--gray-9)" && !s.style.fontWeight,
+    );
+    const fileSpan = findSpan(
+      rendered.container,
+      (s) => s.style.fontWeight === "600",
+    );
+
+    expect(dirSpan.style.overflow).toBe("hidden");
+    expect(dirSpan.style.textOverflow).toBe("ellipsis");
+    expect(dirSpan.style.whiteSpace).toBe("nowrap");
+
+    expect(fileSpan.style.whiteSpace).toBe("nowrap");
+    expect(fileSpan.style.flexShrink).toBe("0");
+
+    expect(dirSpan.parentElement).toBe(fileSpan.parentElement);
+    expect(dirSpan.parentElement?.style.display).toBe("flex");
+  });
+});

apps/code/src/renderer/features/code-review/components/ReviewShell.tsx

@@ -509,9 +509,24 @@ function FileHeaderRow({
         }}
       />
       <FileIcon filename={fileName} size={14} />
-      <span style={{ color: "var(--gray-9)" }}>{dirPath}</span>
-      <span style={{ fontWeight: 600, marginLeft: dirPath ? "-6px" : 0 }}>
-        {fileName}
+      <span
+        style={{ display: "flex", minWidth: 0, flex: 1, gap: "6px" }}
+        title={dirPath + fileName}
+      >
+        <span style={{ fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
+          {fileName}
+        </span>
+        <span
+          style={{
+            color: "var(--gray-9)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            minWidth: 0,
+          }}
+        >
+          {dirPath}
+        </span>
       </span>
       <span style={{ fontFamily: "monospace", fontSize: "10px" }}>
         {additions > 0 && (