fix(web): PR commit menu no longer stretches across the window

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Problem

The commit scope menu in a PR's Code tab only had the shared menu limit, which is the viewport width minus 2rem. Each row truncates its headline, but only after the menu can't grow any wider, so the longest headline set the menu's width. GitHub cuts messageHeadline to 70 characters, which already gives a ~590px menu that covers the PR list beside a narrow panel. Forgejo and Bitbucket send the full first line, so one long subject line stretches the menu across the whole window.

Fix

Cap this menu at min(28rem, 100vw - 2rem). Headlines truncate at a readable width, the short SHA stays visible, and the existing per-row tooltip still shows the full headline. The shared menu default is unchanged.

Before / after

A Forgejo/Bitbucket-length headline at a 1700px window. Simulated: the PR is a GitHub fixture, so the first row's text was swapped in the DOM for the full 300-character subject those hosts would send. Layout is pure CSS, so this is what they render.

A real GitHub fixture (flamboh/t3-pr-ui-sandbox#18) at a 1000px window:

Validation

Measured in headless Chromium: the menu went from 1668px to 448px at a 1700px window with the long headline, and from 593px to 448px with GitHub's real 70-character headlines.

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

[macroscopeapp]

Approvability

Verdict: Approved at f65921a

Macroscope's review found this PR approvable — This is a focused one-line CSS adjustment to cap an existing PR commit menu at a responsive readable width. It changes only layout presentation and preserves the menu’s existing data, selection, and tooltip 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: eaf2e77b-63b8-4c57-bc4b-27afd5e1e691

📥 Commits

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

📒 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; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

The commit-scope menu now limits its width to the smaller of 28rem or the viewport width minus 2rem. Commit selection and pagination are unchanged.

Changes

Responsive commit-scope menu

Layer / File(s)	Summary
Responsive menu width apps/web/src/components/pullRequest/PullRequestCodeTab.tsx	The menu content now uses min(28rem, calc(100vw - 2rem)) as its maximum width.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to f6592

The commit menu is capped on wide screens and remains within narrow viewports while long headlines truncate. No material merge risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the problem and fix, includes before-and-after UI screenshots, and reports focused validation results. It does not include the required Scope and approval information or expla…	Add a Scope and approval section. Link the triaged issue or maintainer approval, or explain why this small, focused fix qualifies without prior approval.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: preventing the PR commit menu from stretching across the window.
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.

Full details: Description check

Explanation

The description explains the problem and fix, includes before-and-after UI screenshots, and reports focused validation results. It does not include the required Scope and approval information or explain why this focused fix needs no prior issue or approval.

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