fix(web): collapsed composer bar stops flipping its labels while you scroll

[t3dotgg]

What Changed

When the composer is collapsed, the bar under it kept sliding left and right. Its labels (workspace, branch, model, access) switched on and off at random while you scrolled.

The bar decides between "labels" and "icons only" from each label's full text width. Since branch names got middle truncation (#12805), a branch label is two text spans: a head and a tail. The width read took the largest scrollWidth in the label, so when the label was hidden or squeezed it dropped the tail. On a real thread that made the bar measure 670px as icons but 730px as labels. That gap (~55px) is much bigger than the 16px hysteresis, so each re-measure flipped the bar. Any re-render of the toolbar can cause a re-measure, which is why it looked random.

Now labelTextWidth adds up the laid-out width of every text run in the label. Text keeps its full width when its box clips it, so the result is the same in every state (729px and 729px on the same thread). The result is capped at the label's 240px max width, since a shown label never grows past that.

UI Changes

Same thread, same 724px bar, same six re-measures.

Before: labels → icons → labels → icons → labels → icons → labels

📹 screen recording

After: icons → icons → icons → icons → icons → icons → icons

📹 screen recording

Also checked in the dev app: labels still come back when the composer expands, and the bar switches to icons right after it collapses.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved how labels are sized when space is limited, helping prevent text from being clipped or taking up more room than needed.

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.5 KiB	13.5 KiB	+11 B (+0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	7.1 KiB	7.1 KiB	−5 B (−0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.4 KiB	6.4 KiB	+16 B (+0.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	56.2 KiB	56.2 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	9	9	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.5 KiB	−2 B (−0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	7.1 KiB	7.1 KiB	−4 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.4 KiB	6.4 KiB	+2 B (+0.0%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	57.0 KiB	57.0 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	9	9	0 (0.0%)	21	✅

Baseline: ebdcda1 · PR result: 831aa4b · 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: 114.0 KiB
• Claude decoded thread snapshot: 114.7 KiB

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

[macroscopeapp]

Approvability

Verdict: Approved at 831aa4b

Macroscope's review found this PR approvable — This is a focused one-file UI bug fix that makes the existing composer label measurement stable, including a cap matching the labels’ current rendered maximum width. It introduces no new capability, schema, deployment behavior, or sensitive-path 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: 6cdae7f4-b06a-4304-8f28-177897876311

📥 Commits

Reviewing files that changed from the base of the PR and between ebdcda1 and 831aa4b.

📒 Files selected for processing (1)

• apps/web/src/components/BranchToolbar.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 1 remains after this review.

---

📝 Walkthrough

Walkthrough

BranchToolbar now measures hidden label text by summing text-node widths and capping the result at a finite maxWidth. Overflow measurement reserves the difference between this width and the label’s visible width.

Changes

Context label overflow

Layer / File(s)	Summary
Measure context-label text apps/web/src/components/BranchToolbar.tsx	A new helper sums text-node widths and caps the result at a finite motion-element maxWidth. Overflow measurement uses the difference between that result and the visible label width, replacing the largest-subtree-scrollWidth calculation.

Priority: ➖ Normal

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

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 831aa

The changed label measurement has no identified merge-blocking issue; the PR is mergeable after normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary fix: preventing the collapsed composer bar from repeatedly switching its labels while scrolling.
Description check	✅ Passed	The description explains the problem, technical cause, implemented fix, observed behavior, UI results, and validation. It includes screenshots, videos, and a completed checklist. The template's separa…
Linked Issues check	✅ Passed	The PR addresses the coding requirement in [#12891]. useLabelsOverflow now measures every text run with Range.getBoundingClientRect(), sums the runs, and caps the result at the motion label's fini…
Out of Scope Changes check	✅ Passed	The changes are limited to apps/web/src/components/BranchToolbar.tsx. The moved constants, labelTextWidth helper, and measurement update directly support the linked composer context-strip fix. No …
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 2 functions across 1 files.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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