Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nejim123 wants to merge 3 commits into
base: main
Choose a base branch
from
+7 −7
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e779d71
fix(web): wrap phase rail dots and center the context meter ring
nejim123 Aug 16, 2026
56eade9
Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…
nejim123 Aug 16, 2026
81d3d9f
Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…
nejim123 Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/web/src/components/AgentsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
>
<span
className={cn(
"font-mono text-[.65rem]",
"shrink-0 font-mono text-[.65rem]",

@macroscopeapp macroscopeapp Bot Aug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@chatgpt-codex-connector chatgpt-codex-connector Bot Aug 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Allow long phase titles to yield space

When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.

Useful? React with 👍 / 👎.

phase.state === "running"
? "text-info-foreground"
: phase.state === "done"
Expand All @@ -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>
) : (
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/chat/ContextWindowMeter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading