@@ -56,9 +59,11 @@ const CodeAccordian = ({
) : (
<>
{path?.startsWith(".") &&
.}
-
- {removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
-
+
+
+ {formatPathTooltip(path)}
+
+
)}
diff --git a/webview-ui/src/components/ui/PathTooltip.tsx b/webview-ui/src/components/ui/PathTooltip.tsx
new file mode 100644
index 0000000000..dc6e176d8e
--- /dev/null
+++ b/webview-ui/src/components/ui/PathTooltip.tsx
@@ -0,0 +1,54 @@
+import { ReactNode } from "react"
+import { StandardTooltip } from "./standard-tooltip"
+
+interface PathTooltipProps {
+ /** The file path or content to display in the tooltip */
+ content: string
+ /** The element(s) that trigger the tooltip */
+ children: ReactNode
+ /** The preferred side of the trigger to render the tooltip */
+ side?: "top" | "right" | "bottom" | "left"
+ /** The preferred alignment against the trigger */
+ align?: "start" | "center" | "end"
+ /** Distance in pixels from the trigger */
+ sideOffset?: number
+ /** Whether the trigger should be rendered as a child */
+ asChild?: boolean
+}
+
+/**
+ * PathTooltip component specifically designed for displaying file paths with appropriate
+ * wrapping and responsive width behavior. Use this for truncated file paths that need
+ * tooltips to show the full path.
+ *
+ * Features:
+ * - Responsive max-width that adapts to panel size (max 300px on wide panels, 100vw on narrow)
+ * - Uses text-wrap instead of text-balance to minimize whitespace
+ * - Leverages existing break-words CSS for natural line breaking at path separators
+ *
+ * @example
+ *
+ * ...path.tsx
+ *
+ */
+export function PathTooltip({
+ content,
+ children,
+ side = "top",
+ align = "start",
+ sideOffset = 4,
+ asChild = true,
+}: PathTooltipProps) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/webview-ui/src/utils/formatPathTooltip.ts b/webview-ui/src/utils/formatPathTooltip.ts
new file mode 100644
index 0000000000..cfe0b54a7f
--- /dev/null
+++ b/webview-ui/src/utils/formatPathTooltip.ts
@@ -0,0 +1,28 @@
+import { removeLeadingNonAlphanumeric } from "./removeLeadingNonAlphanumeric"
+
+/**
+ * Formats a file path for display in tooltips with consistent formatting.
+ *
+ * @param path - The file path to format
+ * @param additionalContent - Optional additional content to append (e.g., line snippets, reasons)
+ * @returns Formatted string ready for tooltip display
+ *
+ * @example
+ * formatPathTooltip("/src/components/MyComponent.tsx")
+ * // Returns: "src/components/MyComponent.tsx" + U+200E
+ *
+ * @example
+ * formatPathTooltip("/src/utils/helper.ts", ":42-45")
+ * // Returns: "src/utils/helper.ts:42-45" + U+200E
+ */
+export function formatPathTooltip(path?: string, additionalContent?: string): string {
+ if (!path) return ""
+
+ const formattedPath = removeLeadingNonAlphanumeric(path) + "\u200E"
+
+ if (additionalContent) {
+ return formattedPath + additionalContent
+ }
+
+ return formattedPath
+}