fix(desktop): keep Agent Graph results label from shrinking

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.

[heeoneie]

Summary

.maka-agent-graph-results is a flex row, and the label <span> inside it had
neither flex-shrink: 0 nor white-space: nowrap. Flex therefore shrinks the
label to min-content whenever the id list needs room — and min-content in a
script with no break opportunities is one glyph, which is how 已选择结果
degrades into 已选 / 择结 / 果.

This is not zh-only. The same missing constraint breaks Selected results into
two lines, and it does so at the panel's full 680px measure, not just when the
window is narrow — the English label is long enough that two graph_record_*
ids already push it over. So the fix reads better as the label never shrinks
than as add nowrap for Chinese: the ids are the part of the row with room to
give, and they already truncate.

Fixes#3966

Verification

npm run lint && npm run format:check && npm run build && npm run typecheck —
all pass locally.

Captured in Storybook per apps/desktop/stories/FIDELITY.md, which names it as
ground truth for pixel work, driving the real AgentGraphPanel in its real
frame (ChatSurfaceLayout, the host at app-shell.tsx:2848) with a
snapshot.finish carrying two graph_record_* ids. The story itself is not
committed: FIDELITY.md puts responsive behaviour outside the story lane (CI
mounts every story once at 1280 wide), and a narrower version of a state
already on screen is not its own story. A permanent guard for this belongs
with the agent-graph slice of #3944.

Two viewports × both shipped locales. The wide column is the control — it shows
the fix did not disturb the case that was already correct.

	before	after
zh · 430px
en · 430px
zh · 980px
en · 980px

Not run: npm run test, and the desktop e2e suite — this changes no behaviour
either one asserts.

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code (Claude Opus 5) wrote the CSS rules and this
description, built the local Storybook harness, and captured the screenshots.
Root cause and scope came from the issue reporter and from my own reproduction.
The commit carries a Generated-by: Claude Code trailer.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a packages/ui contract or the
desktop e2e harness rather than to a story — see the #3944 note above.

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[Astro-Han]

Right diagnosis and the fix is scoped to it. The row is <div><span/><code/></div>, so > span and code name exactly the two children: the label stops shrinking, and code moves from the default 0 1 auto to flex: 1 1 0 so it absorbs the remainder and truncates through the min-width: 0 + text-overflow it already had. code carries no background or border, so a short id list filling the leftover width is invisible — no layout side effect on the case that was already correct, which the 980px column confirms.

Agreed that this reads as the label never shrinks rather than a zh-specific nowrap; English breaks at the panel's full measure too, and the ids are the part of the row with room to give.

AI-assisted review: I verified the JSX structure and the existing code rules against head dddfe12d3 myself. No tests run. AI review is not independent human review.