perf(web): sidebar drag no longer restyles the whole app

[flamboh]

Note

🤖 Opus 5.5 on behalf of Oliver

Problem

Dragging the left sidebar feels heavier than dragging the right panel. On every frame, the drag wrote --sidebar-width to the sidebar wrapper. That wrapper contains the whole app, and custom properties inherit, so every frame restyled every element. Only the sidebar's gap and container read the variable. The right panel sets a plain width on its own element, so its drag restyles only that element.

Fix

During a drag, SidebarRail now sets width inline on the gap and container. On release, it writes the final width back to --sidebar-width and clears the inline widths. Release, persistence, double-click reset, and the collapse animation all behave as before.

Validation

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

The video shows a production build under 4× CPU throttle, with mouse input paced in real time. Absolute frame rates are low because of software rendering and capture. The comparison between the two runs is the useful part.

Style recalculation, measured with CDP Performance.getMetrics over the same scripted drag of about 245 frames on a production build:

Drag	Style recalc (1×)	Style recalc (4× throttle)	p95 frame interval (4×)
Left, before	2,383–2,809 ms	23,360 ms	183 ms
Left, after	96–100 ms	487 ms	50 ms
Right panel	39–53 ms	322–479 ms	50–83 ms

The test database had one project and one thread. Real sidebars and timelines have far more elements, so the savings there are larger. Targeted lint, format, and the apps/web typecheck pass.

Opus 5.5 via Claude Code in T3 Code

[coderabbitai]

Warning

Review limit reached

Only developers with an assigned seat can use this organization's usage-based review budget, and seats here are assigned manually. Ask an admin to assign a seat, or change the review continuation mode in Billing.

Next included review available in 10 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 10 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: fcf1ca9a-fb7a-40f6-bb0f-ab0fc0ce4160

---

📥 Commits

Reviewing files that changed from the base of the PR and between 3857132 and ec87142.

---

📒 Files selected for processing (1)

• apps/web/src/components/ui/sidebar.tsx

---

---

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

---

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

[macroscopeapp]

Approvability

Verdict: Approved at ec87142

Macroscope's review found this PR approvable — This is a focused sidebar drag performance fix that replaces per-frame inherited style updates with direct widths on the two affected elements, then restores the existing CSS-variable behavior on cleanup. It touches one file and preserves the existing resize, persistence, and cancellation flow.

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

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Thanks for digging into this! The same fix just landed on main in #17659 (perf(web): sidebar drags restyle only the sidebar), which writes the width only to the sidebar gap and container during the drag and sets --sidebar-width on the wrapper once on release, in the same sidebar.tsx file. Closing this one as superseded. If you see a case #17659 doesn't cover, feel free to open a new PR against current main.