From 2a3b6643ea83552cc8cd7322be4bcc77ed870a1d Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Tue, 3 Mar 2026 12:35:39 +0000
Subject: [PATCH] fix(site): cap chat input height and make it scrollable
 (#22545)

---
 .../components/ChatMessageInput/ChatMessageInput.tsx |  2 +-
 site/src/pages/AgentsPage/AgentChatInput.stories.tsx | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

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,
+	},
+};