fix(chat-input): make the textarea scrollable and reset it after submit#696
Merged
Conversation
Three defects in the chat input's auto-sizing: - The textarea carried `overflow-hidden`, so once content exceeded the visible area there was no way to scroll within it. - `onTextareaInput` set `height = scrollHeight` with no clamp. Past 200px the inline height kept growing while `max-height` capped the rendered height, leaving the two diverged and the scrollbar unreachable. The growth is now clamped in a shared `autoResize()`. - `submitChatRequest` cleared the value but left the stale inline height, so the input stayed expanded after sending. Adds `resetTextareaHeight()`. Also drops the `.chat-textarea` CSS block: it declared its own min-height/max-height/field-sizing but the class is applied nowhere in the template, so the rules were dead while contradicting the real inline styles. The JS path is now the sole sizing authority. The `isExpanded` signal goes too — it was written on submit and never read. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The chat input got awkward once the message grew long: you couldn't scroll inside the textarea, the expansion felt clunky, and it stayed expanded after sending.
Three separate causes:
overflow-hidden, so once content exceeded the visible area there was no way to reach it.onTextareaInputsetheight = scrollHeightwith no clamp. Past 200px the inline height kept growing whilemax-height: 200pxcapped the rendered height, leaving the element's real and displayed heights diverged and the scrollbar unreachable.submitChatRequestcleared the value but left the stale inline height behind.Changes
overflow-hidden→overflow-y-autoon the textarea.autoResize().resetTextareaHeight()called on submit..chat-textareaCSS block — it declared its ownmin-height/max-height/field-sizing: content, but the class is applied nowhere in the template, so the rules were dead while contradicting the real inline styles. The JS path is now the sole sizing authority, with the inlinemin-height/max-heightas the CSS backstop.isExpandedsignal — written on submit, never read.Verification
Verified live against the dev backend on
localhost:4200:200px, content992px— no longer overrunsoverflow-y: auto, scrollTop moves 0 → 792152px→60px, scrollTop 0npx tsc --noEmitclean.60pxrather than empty string).🤖 Generated with Claude Code