Fixed-height message bubbles silently amputate long AI responses, hiding answers that the user paid tokens to generate. Users have no indication that content is missing, which creates a trust problem: they believe the AI gave a short or incomplete answer when in fact the UI is simply clipping it. This is especially damaging for technical content like long code blocks, step-by-step instructions, or multi-paragraph analysis where the hidden portion often contains the conclusion or the critical step.
High because clipped content creates silent data loss from the user's perspective and undermines trust in every response.
Remove fixed height constraints from individual message bubble components in src/components/chat/MessageBubble.tsx. Let each bubble expand naturally with its content and place the scroll container at the message list level, not on individual messages.
.message-list { overflow-y: auto; height: 100%; }
.message-bubble { padding: 1rem; border-radius: 0.5rem; }
ID: ai-chat-visibility.response-display.long-response-scroll
Severity: high
What to look for: Enumerate all message bubble components and for each classify whether it uses fixed height constraints. Look for CSS that would clip content: overflow: hidden combined with a fixed height or max-height on individual message bubbles. Check for overflow-hidden combined with height constraints in Tailwind classes on message components. The overall chat window having a fixed height with overflow-y: scroll is correct and expected — what is wrong is fixed height on individual message bubbles themselves.
Pass criteria: Individual message bubbles expand to fit their content. The chat message list container has overflow-y: auto or overflow-y: scroll so the full conversation is scrollable. No content is clipped. Report even on pass: "Checked N message components — none use fixed height constraints."
Fail criteria: Individual message components have a fixed or max height with overflow: hidden, causing long responses to be cut off and unreachable.
Do NOT pass when: A "show more" truncation button exists that hides content by default — initial rendering must show the full response without user interaction.
Skip (N/A) when: No chat message rendering component is found in the project.
Detail on fail: "MessageBubble has max-h-64 overflow-hidden — responses longer than ~16 lines will be clipped and unreachable"
Remediation: Remove fixed height constraints from individual message bubble components. Let each bubble expand naturally with its content. Place the scroll container at the message list level, not on individual messages:
/* Message list container — correct */
.message-list { overflow-y: auto; height: 100%; }
/* Individual message bubble — no height constraint */
.message-bubble { padding: 1rem; border-radius: 0.5rem; }