From 4c1d99d7f3e722c5e88c0dda6a96f9de8f296115 Mon Sep 17 00:00:00 2001
From: Francisco Arredondo <95440147+frarredondo@users.noreply.github.com>
Date: Sun, 16 Aug 2026 03:02:05 -0700
Subject: [PATCH] fix(web): show filenames when commit dialog paths overflow
 (#6392)

Co-authored-by: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
---
 apps/web/src/components/GitActionsControl.tsx | 12 +++----
 .../components/StartTruncatedPath.test.tsx    | 31 +++++++++++++++++++
 .../web/src/components/StartTruncatedPath.tsx | 25 +++++++++++++++
 3 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/StartTruncatedPath.test.tsx
 create mode 100644 apps/web/src/components/StartTruncatedPath.tsx

diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 7b824370b39d258edf44e8f45aebd665026d6460..d448a720ebfc6a16b2dbb5ef9f7b6d15ac5b0e84 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/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>
diff --git a/apps/web/src/components/StartTruncatedPath.test.tsx b/apps/web/src/components/StartTruncatedPath.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f7b158bce39ceb8b6e1aacaa01d30e57b148f9c
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/apps/web/src/components/StartTruncatedPath.tsx b/apps/web/src/components/StartTruncatedPath.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b467d141a8ca1cb5dea16673048211a04e9b661c
--- /dev/null
+++ b/apps/web/src/components/StartTruncatedPath.tsx
@@ -0,0 +1,25 @@
+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
+        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>
+  );
+}
-- 
2.54.0