From 612db6d0701b47427afac588c318e365a6e28a5d Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Mon, 22 Jul 2024 07:59:06 -0400
Subject: [PATCH] Fix layout of chat content when scrollbar becomes visible

---
 webview-ui/src/components/ChatRow.tsx             | 2 +-
 webview-ui/src/components/ChatView.tsx            | 3 ++-
 webview-ui/src/components/CodeBlock/CodeBlock.tsx | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index 2730394..c2872b0 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/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" && (
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index 4d8eda3..1ba0865 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/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} />
diff --git a/webview-ui/src/components/CodeBlock/CodeBlock.tsx b/webview-ui/src/components/CodeBlock/CodeBlock.tsx
index 678819d..8263909 100644
--- a/webview-ui/src/components/CodeBlock/CodeBlock.tsx
+++ b/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>