# Long responses are fully scrollable without overflow clipping

- **Pattern:** `ab-000138` (`ai-chat-visibility.response-display.long-response-scroll`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000138
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000138)

## Why it matters

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.

## Severity rationale

High because clipped content creates silent data loss from the user's perspective and undermines trust in every response.

## Remediation

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.

```css
.message-list { overflow-y: auto; height: 100%; }
.message-bubble { padding: 1rem; border-radius: 0.5rem; }
```

## Detection

- **ID:** `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:

  ```css
  /* 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; }
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-000138