fix(web): merge button fits its label and animates width changes

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Problem

The PR panel's header merge button is much wider than its label when the merge method is plain "Merge". The button always reserved room for its "Confirm merge?" state. "Squash and merge" and "Rebase and merge" are already longer than that, so only plain Merge showed the empty space.

Change

The button now sizes to its method label and animates its width whenever the label changes:

• Clicking "Merge" grows it to "Confirm merge?". It shrinks back when the confirmation expires or is cancelled.
• "Merging..." while the merge runs.
• Switching between Merge, Squash and merge, and Rebase and merge from the ⋯ menu.

A new AnimatedWidth component, the width counterpart of AnimatedHeight, does this. It measures its content with the shared observeResize observer and transitions width over 150ms. It doesn't animate on first render and respects prefers-reduced-motion. interpolate-size can't do this on its own: the button's width is auto before and after, so the browser never starts a transition. That approach is also Chromium-only.

The button's minimum width is still its method label. That way "Squash and merge" never shrinks when it becomes "Confirm merge?", so a second click near the left edge doesn't miss. The header actions are right-aligned, so plain Merge grows to the left and stays under the pointer.

Scope and approval

This is a small, focused visual fix for one control. Confirm behavior, actions, and the other header buttons are unchanged.

Verification

• vp test run apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx: 29 passed. Web typecheck passes, and lint on the changed files shows no errors.
• Checked in the web app against an approved, green sandbox PR, measuring the button on every frame. Merge → Confirm merge? grows 68 → 127px in about 130ms. The way back and Rebase and merge → Merge shrink smoothly, and the label stays next to the icon throughout. I clicked Merge only once each time and never merged the PR.
• A real Escape key press while armed cancels the confirmation and leaves the panel open.

Before: Merge reserves the width of "Confirm merge?"

After: Merge fits its label at rest

After, transition slowed to 1.2s for the recording (the browser recorder captures about 7–14 fps, too few frames to show a 150ms tween). It shows Merge → Confirm merge? → Escape → Merge, then switching to Squash and merge and back to Merge.

https://gh-file-drop-api-prod-galwoqjslzlnws6s.oliver-boorstein.workers.dev/f/264963c5b63a352b/merge-width-slowed.mp4

Not checked: the desktop app and dark theme.

Model: Claude Opus 5.5 (first screenshots by GPT-5.6 Luna). Harness: Claude Code in T3 Code.

[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: 602d0988-9152-40a0-b314-b6e8d37def62

📥 Commits

Reviewing files that changed from the base of the PR and between 3bfb767 and e68f134.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

The pull request adds AnimatedWidth, which measures its content and applies a width transition unless reduced motion is preferred. The merge button uses it around the label, which changes between merging, confirmation, and the selected merge method.

Changes: Merge label sizing

Layer / File(s)	Summary
Measure and apply merge-label width apps/web/src/components/AnimatedWidth.tsx, apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx	AnimatedWidth observes its content and applies the rounded-up positive width to its outer span. The merge button uses the component around its label and removes the separate hidden confirmation label.

Priority: ⬇️ Low

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

Change: Bug fix

Merge Risk: ⚪ Minimal · up to e68f1

The merge-label sizing change is ready to merge after normal checks; no actionable issue was found.

Pre-merge checks · 4

Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title is concise, specific, and accurately summarizes the main change: the web merge button fits its label and animates width changes.
Description check		The description includes all required sections. It explains the problem, implementation, scope rationale, focused verification, visual evidence, untested areas, and the model and harness used.
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

• 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 3bfb767

Macroscope's review found this PR approvable — This is a small, isolated web UI fix that makes the existing merge button track its label and animate width changes. Its runtime effects are limited to presentation; merge actions, accessibility text, tooltips, and other product behavior remain unchanged.

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

Dismissing prior approval to re-evaluate fd4a53f

Dismissing prior approval to re-evaluate 3bfb767