From 1b2d929902a1f101d3262fe39e3073fd0480f6af Mon Sep 17 00:00:00 2001
From: lordspline <74811063+lordspline@users.noreply.github.com>
Date: Fri, 19 Jun 2026 06:19:33 +0000
Subject: [PATCH] Constrain AI chat input height to keep send button accessible

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
---
 .../src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx     | 9 ++++++++-
 .../src/scenes/max/components/QuestionInput.test.tsx     | 7 +++++++
 frontend/src/scenes/max/components/QuestionInput.tsx     | 1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
index f5732d3c12aa..9696d3282972 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
@@ -13,6 +13,7 @@ interface LemonTextAreaPropsBase extends Pick<
     value?: string
     placeholder?: string
     className?: string
+    textareaClassName?: string
     /** Whether input field is disabled */
     disabled?: boolean
     ref?: React.Ref<HTMLTextAreaElement>
@@ -54,6 +55,7 @@ export type LemonTextAreaProps = LemonTextAreaWithEnterProps | LemonTextAreaWith
 export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextAreaProps>(function LemonTextArea(
     {
         className,
+        textareaClassName,
         onChange,
         onPressEnter,
         onPressCmdEnter,
@@ -80,7 +82,12 @@ export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextArea
             <TextareaAutosize
                 minRows={minRows}
                 ref={textRef}
-                className={cn('LemonTextArea w-full', hasFooter ? 'rounded-t' : 'rounded', className)}
+                className={cn(
+                    'LemonTextArea w-full',
+                    hasFooter ? 'rounded-t' : 'rounded',
+                    className,
+                    textareaClassName
+                )}
                 onKeyDown={(e) => {
                     if (stopPropagation) {
                         e.stopPropagation()
diff --git a/frontend/src/scenes/max/components/QuestionInput.test.tsx b/frontend/src/scenes/max/components/QuestionInput.test.tsx
index 3ed3fa138e07..e1b2b0cd4076 100644
--- a/frontend/src/scenes/max/components/QuestionInput.test.tsx
+++ b/frontend/src/scenes/max/components/QuestionInput.test.tsx
@@ -76,4 +76,11 @@ describe('QuestionInput slash command autocomplete', () => {
         fireEvent.change(input, { target: { value: '/' } })
         await waitFor(() => expect(slashCommandItem()).toBeInTheDocument())
     })
+
+    it('keeps long prompts scrollable inside the input', () => {
+        const input = screen.getByRole('textbox')
+
+        expect(input).toHaveClass('max-h-[min(40vh,16rem)]')
+        expect(input).toHaveClass('overflow-y-auto')
+    })
 })
diff --git a/frontend/src/scenes/max/components/QuestionInput.tsx b/frontend/src/scenes/max/components/QuestionInput.tsx
index 4a5d19f4209d..3ad81fabb6c4 100644
--- a/frontend/src/scenes/max/components/QuestionInput.tsx
+++ b/frontend/src/scenes/max/components/QuestionInput.tsx
@@ -365,6 +365,7 @@ export const QuestionInput = React.forwardRef<HTMLDivElement, QuestionInputProps
                                             '!border-none !bg-transparent min-h-16 py-2 pl-2 resize-none',
                                             handsFreeFlagEnabled ? 'pr-20' : 'pr-12'
                                         )}
+                                        textareaClassName="max-h-[min(40vh,16rem)] overflow-y-auto show-scrollbar-on-hover"
                                         hideFocus
                                     />
                                 </div>