Fix diff issues and code block style

src/ClaudeDev.ts

@@ -310,27 +310,17 @@ export class ClaudeDev {
 				.catch(() => false)
 			if (fileExists) {
 				const originalContent = await fs.readFile(filePath, "utf-8")
+				// condensed patch to return to claude
 				const diffResult = diff.createPatch(filePath, originalContent, newContent)
-				// Create diff for DiffCodeView.tsx
+				// full diff representation for webview
-				const completeDiffStringRaw = diff.diffLines(originalContent, newContent)
+				const diffRepresentation = diff
-				const completeDiffStringConverted = completeDiffStringRaw
+					.diffLines(originalContent, newContent)
-					.map((part, index) => {
+					.map((part) => {
-						const prefix = part.added ? "+ " : part.removed ? "- " : "  "
+						const prefix = part.added ? "+" : part.removed ? "-" : " "
-						const value = part.value || ""
+						return (part.value || "")
-						return value
 							.split("\n")
-							.map((line, lineIndex) => {
+							.map((line) => (line ? prefix + line : ""))
-								// avoid adding an extra empty line at the very end of the diff output
+							.join("\n")
-								if (
-									line === "" &&
-									index === completeDiffStringRaw.length - 1 &&
-									lineIndex === value.split("\n").length - 1
-								) {
-									return null
-								}
-								return prefix + line + "\n"
-							})
-							.join("")
 					})
 					.join("")
 
@@ -339,7 +329,7 @@ export class ClaudeDev {
 					JSON.stringify({
 						tool: "editedExistingFile",
 						path: filePath,
-						diff: completeDiffStringConverted,
+						diff: diffRepresentation,
 					} as ClaudeSayTool)
 				)
 				if (response !== "yesButtonTapped") {

webview-ui/src/components/ChatRow.tsx

@@ -133,6 +133,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 									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)",
@@ -141,7 +142,10 @@ const ChatRow: React.FC<ChatRowProps> = ({
 								}}
 							/>
 						) : (
-							<code {...rest} className={className}>
+							<code
+								{...rest}
+								className={className}
+								style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>
 								{children}
 							</code>
 						)

webview-ui/src/components/CodeBlock/CodeBlock.tsx

@@ -1,4 +1,3 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useMemo } from "react"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { getLanguageFromPath } from "../../utilities/getLanguageFromPath"
@@ -97,11 +96,12 @@ const CodeBlock = ({
 				borderRadius: "3px",
 				backgroundColor: "var(--vscode-editor-background)",
 				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
-				border: "1px solid var(--vscode-sideBar-border)",
+				border: "1px solid var(--vscode-editorGroup-border)",
 			}}>
 			{path && (
 				<div
 					style={{
+						color: "var(--vscode-descriptionForeground)",
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
@@ -111,7 +111,6 @@ const CodeBlock = ({
 					onClick={onToggleExpand}>
 					<span
 						style={{
-							color: "#BABCC3",
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis",
@@ -123,9 +122,7 @@ const CodeBlock = ({
 						}}>
 						{removeLeadingNonAlphanumeric(path) + "\u200E"}
 					</span>
-					<VSCodeButton appearance="icon" aria-label="Toggle Code">
+					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
-						<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
-					</VSCodeButton>
 				</div>
 			)}
 			{(!path || isExpanded) && (
@@ -152,6 +149,13 @@ const CodeBlock = ({
 						customStyle={{
 							margin: 0,
 							padding: "6px 10px",
+							/*
+							overflowX: auto + inner div with padding results in an issue where the top/left/bottom padding renders but the right padding inside does not count as overflow as the width of the element is not exceeded. Once the inner div is outside the boundaries of the parent it counts as overflow.
+							https://stackoverflow.com/questions/60778406/why-is-padding-right-clipped-with-overflowscroll/77292459#77292459
+							this fixes the issue of right padding clipped off 
+							“ideal” size in a given axis when given infinite available space--allows the syntax highlighter to grow to largest possible width including its padding
+							*/
+							minWidth: "max-content",
 							borderRadius: 0,
 							fontSize: "var(--vscode-editor-font-size)",
 							lineHeight: "var(--vscode-editor-line-height)",