fix(web): clean up composer resize animation

[extoci]

What Changed

• Move composer context controls together when the right sidebar changes the available width.
• Use an interruptible 180 ms FLIP animation for fast open and close reversals.
• Keep horizontal paint inside the toolbar while preserving vertical overflow.
• Truncate long labels before they reach the chevrons.
• Use opacity only when reduced motion is enabled.

Why

The old animation changed label width over 300 ms while the surrounding controls moved at a different speed. This made the toolbar feel disconnected.

Controls could also paint outside the composer during the transition. In narrow layouts, long labels could overlap their chevrons.

The new animation moves the controls and labels together. It stays inside the toolbar and handles quick direction changes without removing the animation.

UI Changes

• Before video:

before.mov

• After video:

after.mov

Verification

• vp test run apps/web/src/components/BranchToolbar.logic.test.ts apps/web/src/components/composerFooterLayout.test.ts
• vp run --filter @t3tools/web typecheck
• Targeted lint and formatting for the four changed components
• Manual open, close, and rapid-reversal checks in the web client

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before and after videos for the animation change

---

Note

Low Risk
UI-only animation and layout tweaks in the composer toolbar; no auth, data, or API changes.

Overview
Replaces the composer context strip’s 300ms label width fade with a coordinated compact/expand transition so environment, workspace, and branch controls move together when width changes (e.g. sidebar resize).

useLabelsOverflow now snapshots [data-composer-context-control] rects before toggling compact state and runs a 180ms FLIP translate3d animation in useLayoutEffect, with prior animations cancelled for quick reversals and no motion when prefers-reduced-motion. Labels use an outer data-composer-label shell (max-width collapse) plus an inner data-composer-label-motion span for opacity/transform; reduced motion keeps opacity-only transitions.

The context strip gains overflow-x-clip to contain horizontal paint during transitions. Child selectors mark controls with data-composer-context-control (including the vertical separator between environment and git controls).

^{Reviewed by Cursor Bugbot for commit 7755d24. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add FLIP-style reposition animation to composer toolbar compact/expand transitions

• Adds animation to the composer-context controls in BranchToolbar when the toolbar switches between compact and expanded states, using a FLIP approach (record pre-change rects, apply translate3d from old to new positions).
• Updates BranchToolbarBranchSelector, BranchToolbarEnvModeSelector, and BranchToolbarEnvironmentSelector to opt into the animation via data-composer-context-control and to wrap label content in data-composer-label-motion spans for smoother label collapse.
• Animation is skipped when prefers-reduced-motion is set.

^{Macroscope summarized 7755d24.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c06a1798-4e73-4ff2-8665-c1099a6202a6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit aa54a6a. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved 7755d24

Pure UI animation polish for the composer toolbar's compact/expand transition. Adds smooth FLIP animations for control repositioning, respects prefers-reduced-motion, and makes no changes to business logic or data handling.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 7755d24