Skip to content

fix(ai): constrain chat input height to prevent button overflow#29

Open
lordspline wants to merge 1 commit into
masterfrom
capy/fix-chat-input-height
Open

fix(ai): constrain chat input height to prevent button overflow#29
lordspline wants to merge 1 commit into
masterfrom
capy/fix-chat-input-height

Conversation

@lordspline

@lordspline lordspline commented Jun 19, 2026

Copy link
Copy Markdown

This PR fixes an issue where typing long messages in the PostHog AI chat caused the input box to grow beyond the viewport, making the send button unreachable and the page unscrollable.

  • Constrain textarea max-height using clamp(6rem, calc(100vh - 12rem), 16rem) to caps height at reasonable limits across all viewports
  • Enable vertical scrolling within the textarea when content exceeds the cap
  • Add test verifying the textarea has the constraint class applied

Open POST-097 POST-097


View with Codesmith Autofix with Codesmith
Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
@lordspline lordspline added the capy Generated by capy.ai label Jun 19, 2026 — with Capy AI
@capy-ai

capy-ai Bot commented Jun 19, 2026

Copy link
Copy Markdown

Visual QA — fix(ai): constrain chat input height

Tested against 07645fc8 (PR branch), compared to master. Built and ran locally at /project/1/ai (Max AI chat).


Empty state

No visual change — both before and after look identical ✅


Long message typed (desktop 1280×800)

Before (master) Textarea grows to maxRows={10}; overflow happens silently with no scrollbar affordance
After (PR) Textarea capped at max-height: 16rem (the top of the clamp range); a scrollbar appears, making overflow explicit

Long message typed (narrow 375×812)

Before (master) Textarea grows tall, no scrollbar visible in the textarea itself
After (PR) Clear vertical scrollbar visible; send button (→) remains accessible at the bottom-right corner

Key observations

  • Empty state: visually identical ✅
  • overflow-y: auto !important: scrollbar now appears on overflow — this is the most visible change ✅
  • max-height: clamp(6rem, calc(100vh - 12rem), 16rem): at test viewports (800–812px height), the 16rem cap is the binding constraint. The 100vh - 12rem branch protects very short viewports (mobile keyboard open, ~300–450px) where maxRows={10} alone would push the send button off-screen ✅
  • Send button (→): accessible in all tested states ✅
  • No regressions on the suggestion chips or empty-state layout ✅

See screenshots in the next comment.

@capy-ai

capy-ai Bot commented Jun 19, 2026

Copy link
Copy Markdown

Narrow (375×812) — before vs after with long message:

comparison_narrow

Desktop (1280×800) — before vs after with long message:

comparison_desktop

capy-ai Bot added a commit that referenced this pull request Jun 19, 2026
capy-ai Bot added a commit that referenced this pull request Jun 19, 2026
@Scrapybara Scrapybara deleted a comment from capy-ai Bot Jun 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

capy Generated by capy.ai

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant