fix(desktop): keep Agent Graph results label from shrinking - #3970
Conversation
The label span in `.maka-agent-graph-results` had neither `flex-shrink: 0` nor `white-space: nowrap`, so flex shrank it to min-content whenever the id list needed room. In a script with no break opportunities min-content is one glyph, which is how `已选择结果` degraded to `已选 / 择结 / 果`; `Selected results` broke to two lines for the same reason, at the panel's full 680px measure. Pin the label and let the id list take the remainder, which is the part that already truncates. Fixes apache#3966 Generated-by: Claude Code Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Astro-Han
left a comment
There was a problem hiding this comment.
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.
Summary
.maka-agent-graph-resultsis a flex row, and the label<span>inside it hadneither
flex-shrink: 0norwhite-space: nowrap. Flex therefore shrinks thelabel 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 resultsintotwo 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 asground truth for pixel work, driving the real
AgentGraphPanelin its realframe (
ChatSurfaceLayout, the host atapp-shell.tsx:2848) with asnapshot.finishcarrying twograph_record_*ids. The story itself is notcommitted: 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.
Not run:
npm run test, and the desktop e2e suite — this changes no behavioureither one asserts.
AI use
Select exactly one:
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 Codetrailer.Checklist
Tests: none added. The repo has no computed-style contract for this panel, and
FIDELITY.md routes responsive behaviour to a
packages/uicontract or thedesktop e2e harness rather than to a story — see the #3944 note above.
Does this PR entail a change in behavior?