fix(web): center the pace icon on the limit card's "left" label

[akash3444]

Problem

On Usage → Limits, the pace icon next to a window's "N% left" sits a couple of pixels above the "left" label instead of lining up with it.

Change

The icon was a direct child of the items-baseline row. An SVG has no text baseline, so its bottom edge aligned to the baseline and the icon rode high. "left" and the icon now share an inline-flex items-center wrapper, which centers the icon on the label while the wrapper itself still aligns to the large percentage's baseline.

Scope and approval

Very small, focused fix for an obvious alignment bug: one wrapper in apps/web/src/components/usage/UsageLimitsPooled.tsx. No behavior changes. Split out of #18570 per the one-problem rule.

Verification

Checked in the dev desktop app (vp run dev:desktop) against a copy of real usage data. The close-ups below are rendered at 3× from the same window. Spacing between "left" and the icon is unchanged (gap-2 in both). Mobile doesn't use this component.

Before	After

Claude Opus 5.5 via Claude Code in T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at fe74ac9

Macroscope's review found this PR approvable — This is a narrowly scoped UI alignment fix that only changes flex layout around the existing label and pace icon. It preserves all existing rendering and interaction behavior without touching configuration, APIs, or product defaults.

Notes:

• All code in this push has already been reviewed. Approvability was decided on eligibility alone.

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

[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: 702baa34-9470-480a-93ff-5a6b0931f4d2

---

📥 Commits

Reviewing files that changed from the base of the PR and between 5d59e71 and fe74ac9.

---

📒 Files selected for processing (1)

• apps/web/src/components/usage/UsageLimitsPooled.tsx

---

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

---

---

📝 Walkthrough

Walkthrough

PoolWindowCard now groups the “left” label and optional pace icon in an inline-flex span with spacing. The displayed remaining percentage and pace behavior are unchanged.

Changes

Usage limit display

Layer / File(s)	Summary
Group remaining label and pace icon apps/web/src/components/usage/UsageLimitsPooled.tsx	The “left” label and optional pace icon now appear together in an inline-flex group with spacing.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

---

Merge Risk: ⚪ Minimal · up to fe74a

The change groups the “left” label with the optional pace icon. No concrete user-facing regression is identified, so the PR is ready to merge after normal checks.

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check		The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the alignment bug, the implementation, the focused scope, the manual verification resu…
Title check		The title is concise, specific, and uses the repository's conventional commit format. It clearly identifies the web UI alignment fix for the pace icon and the limit card label.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

---

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

Dismissing prior approval to re-evaluate fe74ac9