fix(code): collapse long queued messages instead of filling the viewport

[vdekrijger]

Why

Queued messages render their full content in the conversation list. A couple of queued messages with large pasted code blocks consume the entire viewport, making the conversation unreadable (see Before below).

What

• Extracted UserMessage's existing measured collapse pattern (160px cap, scrollHeight measurement on mount, fade gradient, Show more/less toggle) into a shared CollapsibleMessageContent component.
• QueuedMessageView now uses it, so queued messages collapse exactly like regular user messages instead of growing unbounded.
• UserMessage migrated to the shared component — behavior unchanged (same 160px threshold, gradient, and toggle).
• Per repo convention, the new wrapper component accepts both className and style props.

Before / After

(mock-up rendered with the component's exact styles — current rounded-card queued design: same two queued messages, same 620px viewport; before overflows it, after fits both with room to spare)

Test plan

• pnpm typecheck green across all 23 packages (re-run after rebasing onto the packages/ui split).
• pnpm --filter @posthog/ui test — 1290 tests pass (no tests exist for these presentational components; behavior is unchanged for UserMessage and purely additive for queued messages).
• Reviewed via /simplify + review swarm (4 reviewers): grade A, no findings above LOW; the one convention finding (missing style prop) is fixed in this diff.
• Manual: queue several messages with large pasted code — each caps at 160px with a fade and Show more/less; expanding re-measures the virtualized row correctly (virtua ResizeObserver).

---

Created with PostHog Code

[trunk-io]

Merging to main in this repository is managed by Trunk.

• To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

[vdekrijger]

• fix(code): collapse long queued messages instead of filling the viewport #3223 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/sessions/components/session-update/CollapsibleMessageContent.tsx

• ⚠️ src/features/sessions/components/session-update/CollapsibleMessageContent.tsx:37 State initialized from a mount effect no-initialize-state

_{Reviewed by React Doctor for commit 5f32c6f.}

[github-actions]

Mechanical UI refactor — extracts existing collapsible logic into a reusable component and applies it to a second call site. No logic changes, no API/data-model impact, no security surface.

[greptile-apps]

_{Reviews (1): Last reviewed commit: "chore: remove temporary PR asset" | Re-trigger Greptile}