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 let threadLogicInstance: ReturnType @@ -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