Add overflowWrap anywhere to force wrap long words (file paths) to avoid overflowing container

src/ClaudeDev.ts

@@ -383,6 +383,7 @@ export class ClaudeDev {
 					})
 					.join("")
 
+				vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false })
 				const { response, text } = await this.ask(
 					"tool",
 					JSON.stringify({
@@ -415,6 +416,7 @@ export class ClaudeDev {
 				}
 				await fs.mkdir(path.dirname(filePath), { recursive: true })
 				await fs.writeFile(filePath, newContent)
+				vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false })
 				return `New file created and content written to ${filePath}`
 			}
 		} catch (error) {

webview-ui/src/components/ChatRow.tsx

@@ -123,6 +123,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 	const renderMarkdown = (markdown: string = "") => {
 		// react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier.
 		return (
+			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}>
 				<Markdown
 					children={markdown}
 					components={{
@@ -137,6 +138,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 										marginBottom: 0,
 										whiteSpace: "pre-wrap",
 										wordBreak: "break-word",
+										overflowWrap: "anywhere",
 									}}
 									{...rest}
 								/>
@@ -144,11 +146,33 @@ const ChatRow: React.FC<ChatRowProps> = ({
 						},
 						ol(props) {
 							const { style, ...rest } = props
-						return <ol style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} />
+							return (
+								<ol
+									style={{
+										...style,
+										padding: "0 0 0 20px",
+										margin: "10px 0",
+										wordBreak: "break-word",
+										overflowWrap: "anywhere",
+									}}
+									{...rest}
+								/>
+							)
 						},
 						ul(props) {
 							const { style, ...rest } = props
-						return <ul style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} />
+							return (
+								<ul
+									style={{
+										...style,
+										padding: "0 0 0 20px",
+										margin: "10px 0",
+										wordBreak: "break-word",
+										overflowWrap: "anywhere",
+									}}
+									{...rest}
+								/>
+							)
 						},
 						// https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
 						code(props) {
@@ -187,13 +211,18 @@ const ChatRow: React.FC<ChatRowProps> = ({
 								<code
 									{...rest}
 									className={className}
-								style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>
+									style={{
+										whiteSpace: "pre-line",
+										wordBreak: "break-word",
+										overflowWrap: "anywhere",
+									}}>
 									{children}
 								</code>
 							)
 						},
 					}}
 				/>
+			</div>
 		)
 	}
 
@@ -209,8 +238,9 @@ const ChatRow: React.FC<ChatRowProps> = ({
 
 		const pStyle: React.CSSProperties = {
 			margin: 0,
-			whiteSpace: "pre-line",
+			whiteSpace: "pre-wrap",
 			wordBreak: "break-word",
+			overflowWrap: "anywhere",
 		}
 
 		switch (message.type) {

webview-ui/src/components/TaskHeader.tsx

@@ -109,6 +109,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
 						fontSize: "var(--vscode-font-size)",
 						overflowY: isExpanded ? "auto" : "hidden",
 						wordBreak: "break-word",
+						overflowWrap: "anywhere",
 					}}>
 					<TextTruncate
 						key={textTruncateKey}