Skip to content

fix(chat-input): make the textarea scrollable and reset it after submit#696

Merged
philmerrell merged 1 commit into
developfrom
fix/chat-input-textarea-sizing
Jul 20, 2026
Merged

fix(chat-input): make the textarea scrollable and reset it after submit#696
philmerrell merged 1 commit into
developfrom
fix/chat-input-textarea-sizing

Conversation

@philmerrell

Copy link
Copy Markdown
Contributor

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:

  1. No scrolling — the textarea carried overflow-hidden, so once content exceeded the visible area there was no way to reach it.
  2. Clunky expansiononTextareaInput set height = scrollHeight with no clamp. Past 200px the inline height kept growing while max-height: 200px capped the rendered height, leaving the element's real and displayed heights diverged and the scrollbar unreachable.
  3. No reset after submitsubmitChatRequest cleared the value but left the stale inline height behind.

Changes

  • overflow-hiddenoverflow-y-auto on the textarea.
  • Growth clamped to the max in a shared autoResize().
  • New resetTextareaHeight() called on submit.
  • Removes the .chat-textarea CSS block — it declared its own min-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 inline min-height/max-height as the CSS backstop.
  • Removes the isExpanded signal — written on submit, never read.

Verification

Verified live against the dev backend on localhost:4200:

Check Result
Grow → clamp at max inline height 200px, content 992px — no longer overruns
Scroll inside textarea overflow-y: auto, scrollTop moves 0 → 792
Reset after submit inline height 152px60px, scrollTop 0
Shrink while deleting 200 → 104 → 60

npx tsc --noEmit clean.

⚠️ Worth knowing for anyone re-testing: the first submit from the home screen creates a session and remounts the component, so the input collapses whether or not the fix works. The reset was confirmed on a second, in-session submit where the component instance is reused (inline height lands on an explicit 60px rather than empty string).

🤖 Generated with Claude Code

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>
@philmerrell
philmerrell merged commit 0d57b26 into develop Jul 20, 2026
4 checks passed
@philmerrell
philmerrell deleted the fix/chat-input-textarea-sizing branch July 20, 2026 04:02
@philmerrell philmerrell mentioned this pull request Jul 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant