From 643090cb43ab617fb1d04e513f21765b30be5571 Mon Sep 17 00:00:00 2001 From: heyseth Date: Thu, 23 Oct 2025 15:50:46 -0700 Subject: [PATCH 1/2] fix: add tooltips to display full file paths on truncated text in chatview Add tooltips that show the complete file path when hovering over truncated file names in file editing/reading notices throughout the chat interface. Changes: - Add StandardTooltip components to file path displays in CodeAccordian, ChatRow, and BatchFilePermission components - Override default tooltip styles with `text-wrap` to prevent excessive whitespace from text-balance behavior - Use responsive max-width `max-w-[min(300px,100vw)]` to ensure tooltips adapt to narrow panel widths and prevent content cutoff - Leverage existing `break-words` CSS to allow natural line breaking at path separators The added tooltips: - Display full file paths even when truncated in the UI - Wrap text naturally at path separators without excessive whitespace - Adapt responsively to panel width (max 300px on wide panels, 100vw on narrow) - Maintain consistent behavior with other tooltips in the extension Files modified: - webview-ui/src/components/common/CodeAccordian.tsx - webview-ui/src/components/chat/ChatRow.tsx - webview-ui/src/components/chat/BatchFilePermission.tsx --- .../src/components/chat/BatchFilePermission.tsx | 11 +++++++---- webview-ui/src/components/chat/ChatRow.tsx | 11 +++++++---- webview-ui/src/components/common/CodeAccordian.tsx | 13 +++++++++---- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/webview-ui/src/components/chat/BatchFilePermission.tsx b/webview-ui/src/components/chat/BatchFilePermission.tsx index 5bb5d754ccdd..325f082773cc 100644 --- a/webview-ui/src/components/chat/BatchFilePermission.tsx +++ b/webview-ui/src/components/chat/BatchFilePermission.tsx @@ -3,6 +3,7 @@ import { memo } from "react" import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock" import { vscode } from "@src/utils/vscode" import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric" +import { StandardTooltip } from "../ui/standard-tooltip" interface FilePermissionItem { path: string @@ -35,10 +36,12 @@ export const BatchFilePermission = memo(({ files = [], onPermissionResponse, ts vscode.postMessage({ type: "openFile", text: file.content })}> {file.path?.startsWith(".") && .} - - {removeLeadingNonAlphanumeric(file.path ?? "") + "\u200E"} - {file.lineSnippet && ` ${file.lineSnippet}`} - + + + {removeLeadingNonAlphanumeric(file.path ?? "") + "\u200E"} + {file.lineSnippet && ` ${file.lineSnippet}`} + +
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx index 26bc71074adb..6edd22a2c691 100644 --- a/webview-ui/src/components/chat/ChatRow.tsx +++ b/webview-ui/src/components/chat/ChatRow.tsx @@ -63,6 +63,7 @@ import { MessageCircle, } from "lucide-react" import { cn } from "@/lib/utils" +import { StandardTooltip } from "../ui/standard-tooltip" interface ChatRowProps { message: ClineMessage @@ -600,10 +601,12 @@ export const ChatRowContent = ({ className="group" onClick={() => vscode.postMessage({ type: "openFile", text: tool.content })}> {tool.path?.startsWith(".") && .} - - {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"} - {tool.reason} - + + + {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"} + {tool.reason} + +
- {header} + + {header} + ) : isFeedback ? (
@@ -56,9 +59,11 @@ const CodeAccordian = ({ ) : ( <> {path?.startsWith(".") && .} - - {removeLeadingNonAlphanumeric(path ?? "") + "\u200E"} - + + + {removeLeadingNonAlphanumeric(path ?? "") + "\u200E"} + + )}
From 08e64a086611a6bfbc9861e63b79999a27e6a0f0 Mon Sep 17 00:00:00 2001 From: heyseth Date: Thu, 23 Oct 2025 16:51:22 -0700 Subject: [PATCH 2/2] fix: normalize tooltip content to match displayed text exactly Update StandardTooltip content in BatchFilePermission, ChatRow, and CodeAccordian to use removeLeadingNonAlphanumeric() and include the same formatting as the visible text, ensuring tooltips display consistently with what users see. --- webview-ui/src/components/chat/BatchFilePermission.tsx | 2 +- webview-ui/src/components/chat/ChatRow.tsx | 2 +- webview-ui/src/components/common/CodeAccordian.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/webview-ui/src/components/chat/BatchFilePermission.tsx b/webview-ui/src/components/chat/BatchFilePermission.tsx index 325f082773cc..9f23d0fb9c2d 100644 --- a/webview-ui/src/components/chat/BatchFilePermission.tsx +++ b/webview-ui/src/components/chat/BatchFilePermission.tsx @@ -36,7 +36,7 @@ export const BatchFilePermission = memo(({ files = [], onPermissionResponse, ts vscode.postMessage({ type: "openFile", text: file.content })}> {file.path?.startsWith(".") && .} - + {removeLeadingNonAlphanumeric(file.path ?? "") + "\u200E"} {file.lineSnippet && ` ${file.lineSnippet}`} diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx index 6edd22a2c691..c32cd5ebfca1 100644 --- a/webview-ui/src/components/chat/ChatRow.tsx +++ b/webview-ui/src/components/chat/ChatRow.tsx @@ -601,7 +601,7 @@ export const ChatRowContent = ({ className="group" onClick={() => vscode.postMessage({ type: "openFile", text: tool.content })}> {tool.path?.startsWith(".") && .} - + {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"} {tool.reason} diff --git a/webview-ui/src/components/common/CodeAccordian.tsx b/webview-ui/src/components/common/CodeAccordian.tsx index 0ea4c32d4c43..700ba289e050 100644 --- a/webview-ui/src/components/common/CodeAccordian.tsx +++ b/webview-ui/src/components/common/CodeAccordian.tsx @@ -59,7 +59,7 @@ const CodeAccordian = ({ ) : ( <> {path?.startsWith(".") && .} - + {removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}