fix(web): show filenames when commit dialog paths overflow

apps/web/src/components/GitActionsControl.tsx

@@ -51,6 +51,7 @@ import {
   resolveThreadBranchUpdate,
 } from "./GitActionsControl.logic";
 import { AnimatedHeight } from "./AnimatedHeight";
+import { StartTruncatedPath } from "./StartTruncatedPath";
 import { Button } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -1923,14 +1924,13 @@ export default function GitActionsControl({
                               )}
                               <button
                                 type="button"
-                                className="flex flex-1 items-center justify-between gap-3 text-left truncate"
+                                className="flex min-w-0 flex-1 items-center justify-between gap-3 text-left"
                                 onClick={() => openChangedFileInEditor(file.path)}
                               >
-                                <span
-                                  className={`truncate${isExcluded ? " text-muted-foreground" : ""}`}
-                                >
-                                  {file.path}
-                                </span>
+                                <StartTruncatedPath
+                                  path={file.path}
+                                  className={`flex-1${isExcluded ? " text-muted-foreground" : ""}`}
+                                />
                                 <span className="shrink-0">
                                   {isExcluded ? (
                                     <span className="text-muted-foreground">Excluded</span>

apps/web/src/components/StartTruncatedPath.test.tsx

@@ -0,0 +1,31 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { StartTruncatedPath } from "./StartTruncatedPath";
+
+describe("StartTruncatedPath", () => {
+  it("keeps the filename at the visible end by truncating from the start", () => {
+    const path = "apps/desktop/src/components/very/long/CommitDialog.tsx";
+
+    const markup = renderToStaticMarkup(<StartTruncatedPath path={path} />);
+
+    expect(markup).toContain('dir="rtl"');
+    expect(markup).toMatch(
+      /<bdi[^>]*>apps\/desktop\/src\/components\/very\/long\/CommitDialog\.tsx<\/bdi>/,
+    );
+    expect(markup).toContain("overflow-hidden");
+    expect(markup).toContain("text-ellipsis");
+    expect(markup).toContain("whitespace-nowrap");
+    expect(markup).toContain("min-w-0");
+  });
+
+  it("shows the full path in a tooltip", () => {
+    const path = "apps/desktop/src/components/very/long/CommitDialog.tsx";
+
+    const markup = renderToStaticMarkup(<StartTruncatedPath path={path} />);
+
+    expect(markup).toContain('data-slot="tooltip-trigger"');
+    expect(markup).toContain("data-base-ui-tooltip-trigger");
+    expect(markup).toContain(path);
+  });
+});

apps/web/src/components/StartTruncatedPath.tsx

@@ -0,0 +1,26 @@
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
+import { cn } from "~/lib/utils";
+
+export function StartTruncatedPath({ path, className }: { path: string; className?: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        nativeButton={false}
+        render={
+          <span
+            className={cn(
+              "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-left",
+              className,
+            )}
+            dir="rtl"
+          />
+        }
+      >
+        <bdi>{path}</bdi>
+      </TooltipTrigger>
+      <TooltipPopup side="top" className="max-w-sm break-all font-mono">
+        {path}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}