fix(web): context strip labels no longer loop between compact and expanded

[riccardopll]

Fixes #12891

Problem

Scrolling up in a thread crashed the desktop app to the "Something went wrong" screen with React error # 185 (maximum update depth exceeded) on 0.0.43-nightly.20260922.2096. The minified frames decode to setOverflows(nextOverflows) in measure() and the dependency-free useLayoutEffect(() => { measure(); }) in useLabelsOverflow (apps/web/src/components/BranchToolbar.tsx), the loop triaged in #12891.

measure() reserved hidden label text as the largest scrollWidth in the label subtree. Since #12805 the branch label is a MiddleTruncate, a clipped head beside an unclipped tail, so the compact pass reserved the head only while the expanded pass laid out head and tail. The two passes disagreed by about one tail, more than the 16px hysteresis, and each layout effect flipped the other until React gave up.

Scrolling up hits it reliably: the composer collapses into the resting layout, its model and mode controls move into the context strip, and the strip lands on that boundary.

Fix

Sum the leaf spans of each label instead, capped at the motion element's max-width (the one width the compact override leaves alone), so compact and expanded reserve the same room. The math lives in resolveContextStripLabelHiddenWidth with tests, including a sweep over strip widths asserting the compact decision settles in one pass.

No visual change. Verified with the touched test file, targeted lint, and the web typecheck.

Made with Claude Fable 5.1 in Claude Code.

Summary by CodeRabbit

• Bug Fixes
  • Improved context-strip label sizing when space is limited.
  • Labels now reserve the appropriate amount of hidden text width, preventing inaccurate overflow calculations.
  • Improved transitions between compact and expanded label states, avoiding visual oscillation as available space changes.
  • Label sizing now remains consistent across different strip widths and available space.

[macroscopeapp]

Approvability

Verdict: Approved at c032f3a

Macroscope's review found this PR approvable — This is a narrowly scoped web UI bug fix that stabilizes existing context-strip measurement without adding capabilities, changing defaults, or affecting schemas and infrastructure. The new width calculation is isolated and covered by focused tests, including a regression sweep for the compact/expanded loop.

^{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: 0921bbdb-b7ad-42ef-a297-68f7bf1f72e0

📥 Commits

Reviewing files that changed from the base of the PR and between c032f3a and 04d4cac.

📒 Files selected for processing (3)

• apps/web/src/components/BranchToolbar.logic.test.ts
• apps/web/src/components/BranchToolbar.logic.ts
• apps/web/src/components/BranchToolbar.tsx

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

---

📝 Walkthrough

Walkthrough

The PR adds hidden-width calculation for context strip labels, integrates leaf-span measurement into overflow handling, and adds tests for stable compact-state decisions across strip widths.

Changes

Context strip measurement

Layer / File(s)	Summary
Hidden-width calculation and validation apps/web/src/components/BranchToolbar.logic.ts, apps/web/src/components/BranchToolbar.logic.test.ts	The new helper sums leaf widths, caps the result at the expanded maximum width, subtracts visible width, and clamps the result to zero. Tests cover compact and expanded states, middle truncation, and stable compaction.
Overflow measurement integration apps/web/src/components/BranchToolbar.tsx	Overflow measurement now targets the label motion element and aggregates leaf-span widths. Labels without leaf spans use the outer label width.

Priority: ⬆️ High

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: High

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 04d4c

The composer context strip now measures split labels consistently, preventing the compact/expanded feedback loop that caused the renderer crash. Focused tests cover the calculation and settling behavior, with no current actionable merge risk.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 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 identifies the main fix: preventing context strip labels from looping between compact and expanded states.
Description check	✅ Passed	The description clearly explains the problem, root cause, fix, scope, issue reference, and verification. It does not use the exact template headings or include the checklist, but it provides the requi…
Linked Issues check	✅ Passed	Issue [#12891] requires the context strip to settle on one label state and prevent React error #185. BranchToolbar.tsx now sums leaf label widths, caps the width at the motion element maximum, and u…
Out of Scope Changes check	✅ Passed	The changes are limited to BranchToolbar.tsx, BranchToolbar.logic.ts, and related tests. The implementation and tests directly support issue [#12891]. No unrelated behavior or files are identified…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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