fix(site): cap chat input height and make it scrollable (#22545)

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}

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