fix(web): wrap phase rail dots and center the context meter ring

[nejim123]

Problem

Two small layout bugs in the web client:

1. Agents panel phase rail overflows. The rail draws one status dot per member on a single line. A phase with many agents (here, a Verify phase with 56 agents) pushes past the right edge of the panel.
2. Context window meter ring is off center. The ring SVG sits 2px left of the button center, visible on hover.

Fix

• AgentsPanel.tsx (PhaseRail): the phase wrapper and pill get min-w-0 / max-w-full, the chevron and title get shrink-0, and the dot cluster gets flex-wrap. Dots now wrap inside the pill instead of overflowing. One dot per member is preserved.
• ContextWindowMeter.tsx: the ring SVG was absolute inset-0 inside Button, whose base class applies [&_svg]:-mx-0.5 to every svg. With left/right anchors that negative margin becomes a 2px left shift. The SVG is now a plain flex child of the centered wrapper, so the margins stay symmetric and the ring is centered. No visual size change.

Before / after

Phase rail (before):

Phase rail (after):

Context meter (before, right one shows the hover box):

Context meter (after):

Verification

• Rendered both components in a throwaway Vite harness with a 56 member phase and measured in the DOM: rail scrollWidth === clientWidth, ring center offset dx: 0, dy: 0 (was dx: -2).
• vp lint, vp fmt --check, and tsgo --noEmit on apps/web are clean.
• Surfaces: web only (desktop wraps web). Mobile has its own agents UI and is untouched.

---

Note

Low Risk
Tailwind-only presentation tweaks with no logic, API, or data changes.

Overview
Fixes two web-only layout bugs in the agents panel and chat context meter.

Agents panel (PhaseRail): Phase segments and pills now use min-w-0 / max-w-full, chevrons and phase titles use shrink-0, and the member status-dot row uses flex-wrap. Large phases (many agents) keep one dot per member but wrap inside the pill instead of overflowing the panel width.

Context window meter: The ring SVG is no longer absolute inset-0 inside Button. It sits in the centered flex wrapper so Button’s [&_svg]:-mx-0.5 no longer shifts the ring ~2px left; ring size and behavior are unchanged.

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

[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: e486eb25-5975-435e-ad15-02e687860c45

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.}

[macroscopeapp]

One finding in PhaseRail: the new min-w-0 on the phase chip lets it shrink below its content, but the title span was given shrink-0 with no truncation, so long phase titles now spill outside the chip's border instead of being clipped. See the inline comment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

	"shrink-0 font-mono text-[.65rem]",
	"min-w-0 truncate font-mono text-[.65rem]",

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved e779d71

Pure CSS/Tailwind class changes for flexbox wrapping and centering. No logic or runtime behavior changes - only visual layout adjustments. The open review comment is a styling suggestion, not a blocking issue.

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