Skip to content

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

Merged
Astro-Han merged 1 commit into
apache:mainfrom
heeoneie:fix/agent-graph-results-label-shrink
Aug 27, 2026
Merged

fix(desktop): keep Agent Graph results label from shrinking#3970
Astro-Han merged 1 commit into
apache:mainfrom
heeoneie:fix/agent-graph-results-label-shrink

Conversation

@heeoneie

@heeoneie heeoneie commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

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

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 Astro-Han left a comment

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.

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.

@Astro-Han
Astro-Han merged commit 14e8c7b into apache:main Aug 27, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/S Under 100 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(desktop): prevent Agent Graph Selected results label from shrinking to min-content

2 participants