fix(web): PR file headers keep the file name in narrow panels

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Problem

In a narrow PR Code tab, for example a narrow panel with the file tree open, each file header still showed the full "Viewed" label. The file name shrank to nothing first. The expand chevron and change icon can't shrink, so with a slightly wider diff stat they were drawn on top of the +N −N counts.

Fix

The diff scroller is now a size container. Below 20rem, the "Viewed" word hides and only the checkbox stays, which gives that space back to the file name. The checkbox keeps its "Viewed" accessible label. The stale "Changed" warning stays visible because it carries information the checkbox doesn't.

Before / after

A 760px window with the file tree open, which leaves the diff column 181px wide. Fixture: flamboh/t3-pr-ui-sandbox#18.

Close-up of the headers:

Validation

Measured in headless Chromium: the change icon went from overlapping the stat by 5px to clearing it by 41px, and the file name's width went from 0 to 25px. Wider panels are unchanged.

The toolbar overlap visible above the headers is fixed separately in #15561.

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

[macroscopeapp]

Approvability

Verdict: Approved at d40a4d5

Macroscope's review found this PR approvable — This is a two-line, self-contained responsive UI bug fix that preserves the checkbox behavior and accessibility label while preventing file names from collapsing in narrow panels. It introduces no schema, infrastructure, security, billing, authentication, or static-analysis changes.

^{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: 72bda0ac-e0e9-4150-9ed1-068a25a6434c

📥 Commits

Reviewing files that changed from the base of the PR and between d60a71e and d40a4d5.

📒 Files selected for processing (1)

• apps/web/src/components/pullRequest/PullRequestCodeTab.tsx

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

---

📝 Walkthrough

Walkthrough

The code tab hides the “Viewed” label at extra-small container widths and adds the @container class to the diff viewer.

Changes

Code tab display

Layer / File(s)	Summary
Responsive code tab display apps/web/src/components/pullRequest/PullRequestCodeTab.tsx	The “Viewed” label is hidden at extra-small container widths. The diff viewer gains the @container class. The checkbox and label remain present.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to d40a4

At narrow widths, the Viewed text hides while its checkbox remains available, making more room for filenames. The change is ready to merge.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.
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.
Title check	✅ Passed	The title clearly describes the main change: keeping file names visible in narrow pull request panels.
Description check	✅ Passed	The description explains the problem and fix, includes before-and-after screenshots, and reports focused browser measurements. It does not include a separate “Scope and approval” section, but the chan…

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