fix(web,mobile): limit bars keep the even-spending tick visible

[charlielockyer-rice]

The even-spending marker on limit bars is a 1px line at 60% opacity. It disappears over a same-colored fill: on Codex's bar in either theme, it's invisible whenever it falls inside the fill. On web it also overhangs the bar and renders soft at a half-pixel offset. Mobile limit rows draw the same marker.

It's now a 2px tick in a small gap cut through the bar, kept inside the bar's ends. Web cuts the gap with a CSS mask, so it also works on the composer's translucent surface, where a solid outline would leave a halo. Mobile clips the bar on either side of the tick. Position, pace and tooltip content are unchanged, except that the tooltip says "tick" instead of "line". This is a small, obvious-bug fix: the marker can't be seen in a common case.

Before / after (/usage-limits result, Codex account, light and dark):

Checked:

• vp run --filter @t3tools/web typecheck and vp run --filter @t3tools/mobile typecheck: clean.
• vp lint on the changed files: no warnings.
• vp test run apps/web/src/components/usage apps/web/src/components/chat apps/mobile/src/features/usage: 1079 passed.
• In Chrome, with the tick mid-bar, at the far end on a fresh window, and on the composer's translucent surface.

Mobile (iPad Pro simulator, iOS 27, dev client; /usage-limits in the composer, same Codex account):

Not checked: Safari, Android.

Implementation: Claude Opus 5.5 (1M context), Claude Code harness in T3 Code.

🤖 Generated with Claude 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: d1b3c607-576f-433f-aa40-acc581c200bf

📥 Commits

Reviewing files that changed from the base of the PR and between a9fb6a8 and 4b2f2fc.

📒 Files selected for processing (2)

• apps/mobile/src/features/usage/UsageLimitsSection.tsx
• apps/web/src/components/usage/UsageLimits.tsx

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

---

📝 Walkthrough

Walkthrough

The mobile and web usage limit bars now show a clamped, opaque 2px time-left tick with a gap in the quota fill. The mobile bar measures its width and omits the tick and gap when the elapsed position or width is unavailable.

Changes

Usage limit bars

Layer / File(s)	Summary
Tick positioning and bar rendering apps/mobile/src/features/usage/UsageLimitsSection.tsx, apps/web/src/components/usage/UsageLimits.tsx	The mobile bar measures its width and positions a clamped tick, with no tick or gap when the elapsed position or width is unavailable. The web bar clamps its tick and masks a gap around it. Both render a solid 2px tick and update the explanatory text to call it a tick.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 4b2f2

This change makes the even-spending tick on usage limit bars more visible on web and mobile. No concrete merge-blocking risk was found. Mobile device and Safari rendering are not yet verified, so a quick visual check there is advisable.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Approvability	✅ Passed	PASS. The pull request changes only two usage-limit UI components. The diff implements a focused tick visibility and positioning fix. It does not change defaults, static-analysis directives, packages,…
Title check	✅ Passed	The title clearly and concisely describes the main fix: keeping limit-bar even-spending ticks visible on web and mobile.
Description check	✅ Passed	The description explains the problem, implementation, scope rationale, verification results, screenshots, and unverified platforms. It meets the template requirements for a focused bug fix.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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