Skip to content

fix(conversations): Improve tool badge rendering and overflow behavior#115880

Merged
obostjancic merged 16 commits into
masterfrom
ognjenbostjancic/tet-2365-improve-rendering-of-tool-badges
May 21, 2026
Merged

fix(conversations): Improve tool badge rendering and overflow behavior#115880
obostjancic merged 16 commits into
masterfrom
ognjenbostjancic/tet-2365-improve-rendering-of-tool-badges

Conversation

@obostjancic
Copy link
Copy Markdown
Member

@obostjancic obostjancic commented May 20, 2026

Fixes tool badge truncation and overflow in the AI Conversations index and detail views, and makes the entire "Called tool" row in messages selectable instead of just the badge.

CleanShot 2026-05-21 at 10 50 59 CleanShot 2026-05-21 at 10 50 20

Closes TET-2365

- Add min-width: 0 to Tag's inner Text so text-overflow: ellipsis works
    when the tag is width-constrained
- Cap tool badges in ToolTags (index page) with maxWidth: 100% so long
  names show '...' instead of being clipped by the container boundary
- Cap visible tool badges in ConversationAggregatesBar (detail page) at
  160px with a tooltip showing the full name on overflow
- Replace the non-actionable DropdownMenu for extra tool names with a
  Tooltip — clicking the dropdown previously highlighted items but did
  nothing, which was confusing

Refs LINEAR-TET-2365
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@linear-code
Copy link
Copy Markdown

linear-code Bot commented May 20, 2026

TET-2365

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

📊 Type Coverage Diff

✅ No new type safety issues introduced. Coverage: 93.61%

…ow tooltip

The Tag component's inner Text was display:flex, which prevents
text-overflow:ellipsis from applying to text children (that property
only works on block containers). Switching Text to a plain block
element lets the existing overflow/ellipsis rules actually fire when
TagPill is width-constrained.

Also updates the '+N more' tooltip for tool names to render actual
Tag badges instead of a plain comma-separated string.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
obostjancic and others added 2 commits May 20, 2026 14:24
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The selection outline was only on the ClickableTag, making it look
like only the badge was interactive. Moved the isSelected outline to
ToolCallLine so the whole row highlights on selection. Dropped the
ClickableTag wrapper since the row is the clickable unit.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…of them

Tags now have flex-shrink:0 so they take their natural width. Only the
last visible tag gets flex-shrink:1 + min-width:0 so it is the only
one that yields and shows ellipsis when the row runs out of space.
@obostjancic obostjancic marked this pull request as ready for review May 21, 2026 08:53
@obostjancic obostjancic requested review from a team as code owners May 21, 2026 08:53
Comment thread static/app/views/explore/conversations/components/conversationSummary.tsx Outdated
Comment on lines +417 to +422
const MoreToolsTooltip = styled('div')`
display: flex;
flex-wrap: wrap;
gap: ${p => p.theme.space.xs};
padding: ${p => p.theme.space.xs} 0;
`;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

this should please be the Flex primitive component - no more styled divs if possible.

isHoverable
skipWrapper
>
<Text size="sm" variant="muted" wrap="nowrap">
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

could we use <InfoText> here instead of Text with a tooltip ?

Comment thread static/app/views/explore/conversations/components/conversationSummary.tsx Outdated
Comment thread static/app/components/core/badge/tag.tsx
Comment thread static/app/views/explore/conversations/components/toolTags.tsx
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 83ce7c3. Configure here.

Comment thread static/app/views/explore/conversations/components/toolTags.tsx
@obostjancic obostjancic merged commit df1af87 into master May 21, 2026
71 checks passed
@obostjancic obostjancic deleted the ognjenbostjancic/tet-2365-improve-rendering-of-tool-badges branch May 21, 2026 13:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants