diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts
index dc666e3..c9fd877 100644
--- a/src/ClaudeDev.ts
+++ b/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) {
diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index 3e180f4..4af8b56 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -123,77 +123,106 @@ 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 (
-			<Markdown
-				children={markdown}
-				components={{
-					p(props) {
-						const { style, ...rest } = props
-						return (
-							<p
-								style={{
-									...style,
-									margin: 0,
-									marginTop: 0,
-									marginBottom: 0,
-									whiteSpace: "pre-wrap",
-									wordBreak: "break-word",
-								}}
-								{...rest}
-							/>
-						)
-					},
-					ol(props) {
-						const { style, ...rest } = props
-						return <ol style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} />
-					},
-					ul(props) {
-						const { style, ...rest } = props
-						return <ul style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} />
-					},
-					// https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
-					code(props) {
-						const { children, className, node, ...rest } = props
-						const match = /language-(\w+)/.exec(className || "")
-						return match ? (
-							<SyntaxHighlighter
-								{...(rest as any)} // will be passed down to pre
-								PreTag="div"
-								children={String(children).replace(/\n$/, "")}
-								language={match[1]}
-								style={{
-									...syntaxHighlighterStyle,
-									'code[class*="language-"]': {
-										background: "var(--vscode-editor-background)",
-									},
-									'pre[class*="language-"]': {
-										background: "var(--vscode-editor-background)",
-									},
-								}}
-								customStyle={{
-									overflowX: "auto",
-									overflowY: "hidden",
-									maxWidth: "100%",
-									margin: 0,
-									padding: "10px",
-									// important to note that min-width: max-content is not required here how it is in CodeBlock.tsx
-									borderRadius: 3,
-									border: "1px solid var(--vscode-sideBar-border)",
-									fontSize: "var(--vscode-editor-font-size)",
-									lineHeight: "var(--vscode-editor-line-height)",
-									fontFamily: "var(--vscode-editor-font-family)",
-								}}
-							/>
-						) : (
-							<code
-								{...rest}
-								className={className}
-								style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>
-								{children}
-							</code>
-						)
-					},
-				}}
-			/>
+			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}>
+				<Markdown
+					children={markdown}
+					components={{
+						p(props) {
+							const { style, ...rest } = props
+							return (
+								<p
+									style={{
+										...style,
+										margin: 0,
+										marginTop: 0,
+										marginBottom: 0,
+										whiteSpace: "pre-wrap",
+										wordBreak: "break-word",
+										overflowWrap: "anywhere",
+									}}
+									{...rest}
+								/>
+							)
+						},
+						ol(props) {
+							const { style, ...rest } = props
+							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",
+										wordBreak: "break-word",
+										overflowWrap: "anywhere",
+									}}
+									{...rest}
+								/>
+							)
+						},
+						// https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
+						code(props) {
+							const { children, className, node, ...rest } = props
+							const match = /language-(\w+)/.exec(className || "")
+							return match ? (
+								<SyntaxHighlighter
+									{...(rest as any)} // will be passed down to pre
+									PreTag="div"
+									children={String(children).replace(/\n$/, "")}
+									language={match[1]}
+									style={{
+										...syntaxHighlighterStyle,
+										'code[class*="language-"]': {
+											background: "var(--vscode-editor-background)",
+										},
+										'pre[class*="language-"]': {
+											background: "var(--vscode-editor-background)",
+										},
+									}}
+									customStyle={{
+										overflowX: "auto",
+										overflowY: "hidden",
+										maxWidth: "100%",
+										margin: 0,
+										padding: "10px",
+										// important to note that min-width: max-content is not required here how it is in CodeBlock.tsx
+										borderRadius: 3,
+										border: "1px solid var(--vscode-sideBar-border)",
+										fontSize: "var(--vscode-editor-font-size)",
+										lineHeight: "var(--vscode-editor-line-height)",
+										fontFamily: "var(--vscode-editor-font-family)",
+									}}
+								/>
+							) : (
+								<code
+									{...rest}
+									className={className}
+									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) {
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 3c73491..0b523c2 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/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}