fix(web): chat content keeps pace with sidebar resizing

[flamboh]

Note

🤖 Opus 5.5 on behalf of Oliver

Problem

While you drag the left sidebar, the thread details card and the chat lane trail it by a frame and jitter side to side. ChatCanvas measures its width in a ResizeObserver and stores it in React state. React commits updates scheduled from an observer callback after the browser paints, so the card's left and the lane insets always land one frame late.

Fix

Wrap the observer callback in flushSync, so the layout update commits before paint. This runs the same render that already happened each frame, one frame earlier. #14094 applies the same fix to the preview panel's width hooks.

The sidebar's own width transition stays. It drives the collapse/expand animation and is already turned off during drag.

Validation

https://gh-file-drop-api-prod-galwoqjslzlnws6s.oliver-boorstein.workers.dev/f/4cea546b2729b14f/sidebar-resize-before-after.mp4

A per-frame sampler recorded the geometry of every element in the main area during a scripted drag. Before the fix, the details card was out of place at 22–29 of 31 widths. After it, no element was out of place. Ran targeted lint, format, and the apps/web typecheck.

Opus 5.5 via Claude Code in T3 Code

[macroscopeapp]

Approvability

Verdict: Approved at 4b31c32

Macroscope's review found this PR approvable — This is a localized one-file fix that synchronizes existing resize measurements before paint, eliminating a visible frame of lag without adding capabilities, changing defaults, or altering broader application behavior.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 414a5352-fc03-4c1f-876e-3f13d7126986

📥 Commits

Reviewing files that changed from the base of the PR and between b707eeb and 4b31c32.

📒 Files selected for processing (1)

• apps/web/src/components/chat/ChatCanvas.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

ChatCanvas now runs the existing measurement update synchronously for each ResizeObserver callback.

Changes

Canvas measurement

Layer / File(s)	Summary
Synchronous resize measurement apps/web/src/components/chat/ChatCanvas.tsx	ChatCanvas imports flushSync and uses it to run the measurement update in ResizeObserver callbacks.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix

Suggested reviewers: yash-singh1

Merge Risk: ⚪ Minimal · up to 4b31c

Canvas measurements now apply synchronously during resizing to address layout lag. No concrete regression is established, so no material merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: keeping chat content synchronized during sidebar resizing.
Description check		The description covers the problem, fix, validation results, UI recording, targeted checks, and agent disclosure. It does not use the exact Change and Verification headings and does not include a sepa…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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