diff --git a/site/src/components/ChatMessageInput/ChatMessageInput.tsx b/site/src/components/ChatMessageInput/ChatMessageInput.tsx
index d34f1470c2..02526da890 100644
--- a/site/src/components/ChatMessageInput/ChatMessageInput.tsx
+++ b/site/src/components/ChatMessageInput/ChatMessageInput.tsx
@@ -359,7 +359,7 @@ const ChatMessageInput = memo(
 					<RichTextPlugin
 						contentEditable={
 							<ContentEditable
-								className="outline-none w-full whitespace-pre-wrap [&_p]:leading-normal [&_p:first-child]:mt-0 [&_p:last-child]:mb-0"
+								className="outline-none w-full whitespace-pre-wrap overflow-y-auto max-h-[50vh] [scrollbar-width:thin] [scrollbar-color:hsl(var(--surface-quaternary))_transparent] [&_p]:leading-normal [&_p:first-child]:mt-0 [&_p:last-child]:mb-0"
 								data-testid="chat-message-input"
 								style={{ minHeight: "inherit" }}
 								aria-label={ariaLabel}
diff --git a/site/src/pages/AgentsPage/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
index 4c25b79e50..ee891280ff 100644
--- a/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
@@ -125,3 +125,15 @@ export const LoadingDisablesSend: Story = {
 		expect(sendButton).toBeDisabled();
 	},
 };
+
+const longContent = Array.from(
+	{ length: 60 },
+	(_, i) =>
+		`Line ${i + 1}: This is a long line of text used to test overflow and scrollability of the chat input editor.`,
+).join("\n");
+
+export const LongContentScrollable: Story = {
+	args: {
+		initialValue: longContent,
+	},
+};