Fix layout of chat content when scrollbar becomes visible

webview-ui/src/components/ChatRow.tsx

@@ -343,7 +343,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message, syntaxHighlighterStyle }) =>
 	return (
 		<div
 			style={{
-				padding: "10px 15px 10px 15px",
+				padding: "10px 0px 10px 0px",
 			}}>
 			{renderContent()}
 			{isExpanded && message.say === "api_req_started" && (

webview-ui/src/components/ChatView.tsx

@@ -330,7 +330,8 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 				className="scrollable"
 				style={{
 					flexGrow: 1,
-					overflowY: "auto",
+					overflowY: "scroll",
+					padding: "0 6px 0 15px",
 				}}>
 				{modifiedMessages.map((message, index) => (
 					<ChatRow key={index} message={message} syntaxHighlighterStyle={syntaxHighlighterStyle} />

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

@@ -146,6 +146,7 @@ const CodeBlock = ({ code, diff, language, path, syntaxHighlighterStyle }: CodeB
 							borderRadius: 0,
 							fontSize: "var(--vscode-editor-font-size)",
 							lineHeight: "var(--vscode-editor-line-height)",
+							fontFamily: "var(--vscode-editor-font-family)",
 						}}>
 						{code ?? diff ?? ""}
 					</SyntaxHighlighter>