From 07645fc8eb67b0598fe1ca2514dbd492599fb44c Mon Sep 17 00:00:00 2001
From: lordspline <74811063+lordspline@users.noreply.github.com>
Date: Fri, 19 Jun 2026 06:19:38 +0000
Subject: [PATCH] Constrain AI chat input height to prevent send button
 overflow

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
---
 frontend/src/scenes/max/components/QuestionInput.scss     | 5 +++++
 frontend/src/scenes/max/components/QuestionInput.test.tsx | 8 +++++++-
 frontend/src/scenes/max/components/QuestionInput.tsx      | 2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/scenes/max/components/QuestionInput.scss b/frontend/src/scenes/max/components/QuestionInput.scss
index c15865992be9..191846a95074 100644
--- a/frontend/src/scenes/max/components/QuestionInput.scss
+++ b/frontend/src/scenes/max/components/QuestionInput.scss
@@ -17,6 +17,11 @@
     animation-delay: calc(var(--index) * 25ms);
 }
 
+.QuestionInput__Textarea {
+    max-height: clamp(6rem, calc(100vh - 12rem), 16rem);
+    overflow-y: auto !important;
+}
+
 @keyframes QuestionInput__QuestionSuggestion__slide-in-fade-down {
     from {
         opacity: 0;
diff --git a/frontend/src/scenes/max/components/QuestionInput.test.tsx b/frontend/src/scenes/max/components/QuestionInput.test.tsx
index 3ed3fa138e07..bb7e20eba987 100644
--- a/frontend/src/scenes/max/components/QuestionInput.test.tsx
+++ b/frontend/src/scenes/max/components/QuestionInput.test.tsx
@@ -21,7 +21,7 @@ jest.mock(
     { virtual: true }
 )
 
-describe('QuestionInput slash command autocomplete', () => {
+describe('QuestionInput', () => {
     let maxLogicInstance: ReturnType<typeof maxLogic.build>
     let threadLogicInstance: ReturnType<typeof maxThreadLogic.build>
 
@@ -61,6 +61,12 @@ describe('QuestionInput slash command autocomplete', () => {
 
     const slashCommandItem = (): HTMLElement | null => screen.queryByText('/init')
 
+    it('keeps long prompts scrollable inside the textarea', () => {
+        const input = screen.getByRole('textbox')
+
+        expect(input).toHaveClass('QuestionInput__Textarea')
+    })
+
     it('reopens the popover after Escape dismisses it and a fresh slash is typed', async () => {
         const input = screen.getByRole('textbox') as HTMLTextAreaElement
 
diff --git a/frontend/src/scenes/max/components/QuestionInput.tsx b/frontend/src/scenes/max/components/QuestionInput.tsx
index 4a5d19f4209d..d5810fc38d73 100644
--- a/frontend/src/scenes/max/components/QuestionInput.tsx
+++ b/frontend/src/scenes/max/components/QuestionInput.tsx
@@ -362,7 +362,7 @@ export const QuestionInput = React.forwardRef<HTMLDivElement, QuestionInputProps
                                         minRows={1}
                                         maxRows={10}
                                         className={cn(
-                                            '!border-none !bg-transparent min-h-16 py-2 pl-2 resize-none',
+                                            'QuestionInput__Textarea !border-none !bg-transparent min-h-16 py-2 pl-2 resize-none',
                                             handsFreeFlagEnabled ? 'pr-20' : 'pr-12'
                                         )}
                                         hideFocus