fix(web): PR timeline no longer shifts when its scrollbar appears

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Problem

The PR Timeline tab centers its content (mx-auto max-w-3xl) inside a plain overflow-y-auto scroller. When expanding a comment group made the timeline tall enough to scroll, the scrollbar took 6px from the scroller and the whole column jumped 3px to the left. Collapsing it jumped back.

Fix

Add scrollbar-gutter-both to the timeline scroller. That reserves the scrollbar lane on both sides whether or not it scrolls, so the centered column stays put. The settings page, the PR list, and the chat timeline already use the same utility for their centered scrollers.

Before / after

A 1700px window, zoomed on the left edge of the timeline with a fixed guide line. The top crop has the comment group collapsed with no scrollbar, and the bottom crop has it expanded with the scrollbar showing.

Validation

Measured in headless Chromium with scrollbars shown (Playwright hides them by default) against flamboh/t3-pr-ui-sandbox#18. Expanding the comment group moved the column 3px on main and 0px with this change.

Made with Claude Opus 5.5 in Claude Code (via T3 Code).

[macroscopeapp]

Approvability

Verdict: Approved at e9c7ac3

Macroscope's review found this PR approvable — This narrowly scoped UI fix reserves the scrollbar gutter on the existing PR timeline so its centered content remains stable when scrolling begins. It changes no data, API, security, billing, deployment, or static-analysis behavior.

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

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: cfafe8fc-b852-4a3f-a20d-ed7a9e159331

📥 Commits

Reviewing files that changed from the base of the PR and between eac52f0 and e9c7ac3.

📒 Files selected for processing (1)

• apps/web/src/components/pullRequest/PullRequestTimelineTab.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

The pull request timeline scroll container now uses scrollbar-gutter-both. Its height, vertical overflow, padding, and timeline content remain unchanged.

Changes

Timeline Scrollbar Gutter

Layer / File(s)	Summary
Reserve scrollbar space apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx	The timeline scroll container adds scrollbar-gutter-both to reserve space for scrollbars on both sides.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to e9c7a

The timeline reserves space for scrollbars on both sides to prevent the reported layout shift; no material merge risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the scrollbar fix that prevents the PR timeline from shifting.
Description check	✅ Passed	The description explains the problem and fix, includes before-and-after UI evidence, reports focused verification, and identifies the agent and harness. It does not include a scope-and-approval sectio…
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.

• Fix all pre-merge checks with AI

✨ 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.}