fix(chat): stop scrolled-away messages rendering as tall empty boxes

[materemias]

content-visibility: auto sizes an off-screen element by
contain-intrinsic-size rather than by its content, and the reserved sizes were
guesses: a collapsed tool row is about 32px and was reserving 240px, so
messages scrolled out of view became tall empty boxes with their text floating
inside them.

The auto keyword makes it worse rather than better - the browser then
remembers the last rendered height, so a row expanded once (a diff, a long tool
output) keeps that height forever while skipped. Messages are already
paginated, so the DOM stays small and skipping off-screen work buys little.

Keep the paint/layout isolation, drop the sizing.

Summary by CodeRabbit

• Bug Fixes
  • Improved chat message rendering consistency by removing automatic content-visibility behavior while preserving layout and visual containment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 090f765c-1c27-4106-9fc4-30349941bee4

📥 Commits

Reviewing files that changed from the base of the PR and between 0d51774 and 89d8853.

📒 Files selected for processing (1)

• src/index.css

Included review availability: Your plan includes up to 10 reviews per rolling hour; 5 remain after this review.

---

📝 Walkthrough

Walkthrough

The .chat-message rule no longer uses content-visibility or intrinsic-size overrides. It retains layout, style, and paint containment.

Changes

Chat message styles

Layer / File(s)	Summary
Chat message containment declarations src/index.css	The .chat-message rule removes content-visibility: auto, the default intrinsic size, and role-specific intrinsic-size overrides. It retains contain: layout style paint.

Suggested reviewers: viper151, blackmammoth

Poem

I’m a rabbit with tidy CSS,
Trimming hidden size excess.
Layout, style, and paint remain,
While messages render plain.
Hop by hop, the rule is neat,
No intrinsic sizes underfoot.

Merge Risk: ⚪ Minimal · up to 89d88

This localized CSS change removes incorrect off-screen size reservation while retaining layout and paint isolation; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main chat rendering fix and matches the pull request objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

This PR fixes a UI rendering issue in the chat message list where messages scrolled out of view could reserve incorrect height and appear as tall empty boxes, by removing content-visibility: auto and the associated contain-intrinsic-size heuristics while keeping per-message containment.

Changes:

• Removed content-visibility: auto from .chat-message to avoid incorrect off-screen sizing behavior.
• Removed all contain-intrinsic-size reservations for chat message variants (assistant/user/tool/error).
• Added an in-file comment documenting the rationale and observed browser behavior.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.