fix(web): keep composer toolbar controls anchored during transitions

[juliusmarminge]

Expanding the composer toolbar labels snapped the PR and branch group to its new width before sliding it into place, briefly pushing text past the right edge. Collapsing hid the labels immediately and left the icons sliding across the gap.

Animate each label's occupied width and opacity together so flex layout keeps the trailing controls anchored. Account for the visible label width during overflow measurement, and disable the transitions for reduced motion.

Verified both directions in the web app with a long branch name and PR number, including rapid reversals and reduced motion. Frame measurements kept the branch group's right edge fixed. The 104 focused toolbar/layout tests, web typecheck, and formatting checks pass; targeted lint reports existing warnings only.

Before

CleanShot.2026-09-07.at.00.36.05.mp4

After

CleanShot.2026-09-07.at.00.44.58.mp4

Implemented with GPT-6 in Codex.

Summary by CodeRabbit

• UI Improvements
  • Improved branch toolbar responsiveness by animating individual labels while keeping adjacent controls anchored.
  • Updated branch, workspace, and environment selector labels to transition opacity smoothly between compact and expanded states.
  • Improved handling of overflowing labels and reduced-motion preferences for a more consistent experience.

[macroscopeapp]

Approvability

Verdict: Approved at b19ab49

Macroscope's review found this PR approvable — This is a narrowly scoped composer-toolbar animation fix that keeps existing controls anchored by animating label widths instead of translating whole control groups. The remaining changes only adjust label transition styling, with no schema, security, billing, deployment, or product-default impact.

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

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ The exact PR base did not have a successful artifact. Baseline uses the latest successful main measurement shown below.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	13.6 KiB	+2.3 KiB (+20.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	7.0 KiB	+1.6 KiB (+29.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	6.6 KiB	+717 B (+12.0%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	57.1 KiB	+7.3 KiB (+14.7%)	66.4 KiB	✅
Codex	Live turn messages	16	10	−6 (−37.5%)	21	✅
Claude	Total thread wire	11.3 KiB	13.6 KiB	+2.2 KiB (+19.6%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	7.0 KiB	+1.6 KiB (+28.6%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	6.5 KiB	+670 B (+11.2%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	57.8 KiB	+7.2 KiB (+14.3%)	66.4 KiB	✅
Claude	Live turn messages	16	8	−8 (−50.0%)	21	✅

Baseline: 83d769f · PR result: b19ab49 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: ed866126-56da-4fe9-b27f-388c436dd3d8

📥 Commits

Reviewing files that changed from the base of the PR and between 062987b and b19ab49.

📒 Files selected for processing (4)

• apps/web/src/components/BranchToolbar.tsx
• apps/web/src/components/BranchToolbarBranchSelector.tsx
• apps/web/src/components/BranchToolbarEnvModeSelector.tsx
• apps/web/src/components/BranchToolbarEnvironmentSelector.tsx

Included review availability: 9 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 10 reviews per hour.

---

📝 Walkthrough

Walkthrough

The branch toolbar now measures and animates individual composer labels during compactness changes. Branch, workspace, and environment selector labels use opacity-only transitions without translation or scaling.

Changes

Branch toolbar label animations

Layer / File(s)	Summary
Per-label overflow measurement and animation apps/web/src/components/BranchToolbar.tsx	Overflow calculations use rendered label bounds and reserve hidden label content. Label widths animate between states, and cleanup cancels label animations.
Selector label opacity transitions apps/web/src/components/BranchToolbarBranchSelector.tsx, apps/web/src/components/BranchToolbarEnvModeSelector.tsx, apps/web/src/components/BranchToolbarEnvironmentSelector.tsx	Branch, workspace, and environment labels transition opacity only. Compact-state translation, scaling, and transform-specific reduced-motion handling were removed.

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

Merge Risk: ⚪ Minimal · up to b19ab

This updates toolbar label sizing and opacity transitions so controls remain anchored during compactness changes, including reduced-motion behavior. No current merge-blocking risk remains.

Suggested reviewers: t3dotgg, maria-rcks, extoci

🚥 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 2 functions across 4 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 summarizes the primary change: keeping composer toolbar controls anchored during label transitions.
Description check	✅ Passed	The description explains the problem, solution, UI impact, verification steps, and includes before/after links. It does not use the template headings or include the checklist, but the required informa…
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 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch t3code/fix-toolbar-composer-animation

---

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