fix(web): stabilize chat timeline row measurement

[sabraman]

What Changed

This is a focused follow-up for chat timeline overlap and scroll-jiggle behavior in virtualized rows.

It hardens MessagesTimeline so mounted virtual rows are remeasured when their real rendered height changes after initial placement, while avoiding the extra global remeasurement churn that was causing visible twitching.

Scope:

• add per-row mounted element tracking for virtualized timeline rows
• remeasure only dirty virtualized rows when height-affecting row state changes
• dedupe tiny measurement noise with a 1px epsilon
• tighten virtualizer scroll compensation so it only adjusts for rows above the viewport
• add browser regressions for overlap and changed-files collapse/expand stability

Why

The current chat timeline can place a following row too early when an earlier virtualized row grows after render. That shows up as overlapping timeline content.

After fixing the overlap, there was still visible jiggle when collapsing or expanding changed-files trees. The remaining issue was excess measurement churn and over-eager scroll compensation for resized virtualized rows.

This PR keeps the overlap fix while narrowing measurement and scroll correction to the cases that actually need it.

Related to:

• Chat timeline content overlaps (assistant text + tool call cards stack on top of each other) #1035
• [Bug] Assistant message text overlaps tool call cards when scrolling chat history #352
• Fix chat timeline row height estimation #1093
• fix(web): preserve scroll when collapsing large changed-files trees #1113

UI Changes

Before/after screenshots: pending, will add before requesting review.

Video for collapse/expand interaction: pending, will add before requesting review.

Validation

• bun fmt
• bun lint
• bun typecheck
• bun run --cwd apps/web test:browser

Notes

This is intentionally scoped to the timeline measurement/scroll behavior only.
It does not include unrelated workspace changes from the local branch/worktree.

Note

Stabilize chat timeline virtualized row measurement to prevent vertical overlap and jitter

• Wraps measureElement in MessagesTimeline.tsx to cache measured heights per row and skip remeasurement when the delta is ≤1px, reducing unnecessary reflows.
• Computes height signatures via useMemo to track content changes (message length, streaming state, diff summary presence, expanded directories) and only remeasures rows whose signatures changed.
• Suppresses scroll position adjustment on item size change unless the changed item is above the viewport and the user is not near the bottom.
• Guards click events in ChatView.tsx so clicks within virtualized rows skip the anchor-based scroll adjustment workflow.
• Adds integration tests in ChatView.browser.tsx that verify no vertical overlap between virtualized assistant diff summary rows and adjacent user rows, and that button positions remain stable after collapse/expand.

^{Macroscope summarized 7fadfc6. (Automatic summaries will resume when PR exits draft mode or review begins).}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: aaee647a-7799-4025-baf9-5737d4edf4c8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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 and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.