From e779d719d7fc2bb90e185779d20b0ff3c35b2f27 Mon Sep 17 00:00:00 2001
From: nejim123 <nejimfaleh@gmail.com>
Date: Sun, 16 Aug 2026 14:39:19 -0400
Subject: [PATCH] fix(web): wrap phase rail dots and center the context meter
 ring

The Agents panel phase rail rendered one dot per member on a single line, so a
phase with many agents (56 verify agents) ran past the panel edge. The pill and
its dot cluster now shrink and wrap inside the rail width.

The context window meter ring sat 2px left of center. The ring SVG was
absolutely positioned inside the Button, whose base class applies a negative
horizontal margin to every svg; with left/right anchors that margin became a
left shift. The SVG is now a flex child so the margins stay symmetric.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/AgentsPanel.tsx             | 10 +++++-----
 apps/web/src/components/chat/ContextWindowMeter.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/AgentsPanel.tsx b/apps/web/src/components/AgentsPanel.tsx
index 62044a8659d..81bee172cfb 100644
--- a/apps/web/src/components/AgentsPanel.tsx
+++ b/apps/web/src/components/AgentsPanel.tsx
@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
   return (
     <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
       {group.phases.map((phase, index) => (
-        <div key={phase.index} className="flex items-center gap-1">
+        <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
           {index > 0 ? (
-            <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
+            <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
           ) : null}
           <div
             className={cn(
-              "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
+              "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
               phase.state === "running"
                 ? "border-info/40"
                 : phase.state === "done"
@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
           >
             <span
               className={cn(
-                "font-mono text-[.65rem]",
+                "shrink-0 font-mono text-[.65rem]",
                 phase.state === "running"
                   ? "text-info-foreground"
                   : phase.state === "done"
@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
               {phase.state === "done" ? "✓ " : ""}
               {phase.title}
             </span>
-            <span className="flex items-center gap-0.5">
+            <span className="flex min-w-0 flex-wrap items-center gap-0.5">
               {phase.members.length === 0 ? (
                 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
               ) : (
diff --git a/apps/web/src/components/chat/ContextWindowMeter.tsx b/apps/web/src/components/chat/ContextWindowMeter.tsx
index 6e42dcadd8b..41401c64aaa 100644
--- a/apps/web/src/components/chat/ContextWindowMeter.tsx
+++ b/apps/web/src/components/chat/ContextWindowMeter.tsx
@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
                 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
             }
           >
-            <span className="relative flex size-5 items-center justify-center">
+            <span className="flex size-5 items-center justify-center">
               <svg
                 viewBox="0 0 24 24"
-                className="-rotate-90 absolute inset-0 size-full transform-gpu"
+                className="-rotate-90 size-full shrink-0 transform-gpu"
                 aria-hidden="true"
               >
                 <circle