From 8919d33636010d6b9672086dc0df8d16f2fae319 Mon Sep 17 00:00:00 2001 From: Bohdan Triapitsyn Date: Mon, 15 Jun 2026 12:54:47 +0300 Subject: [PATCH] fix: prevent descender clipping and show tool icon when collapsed on mobile - Bump mobile line-height on tool/reasoning rows from leading-4 to leading-5 so descenders (g, y, p) are no longer clipped by truncate overflow - Show the tool icon (not the chevron) for collapsed expandable tools on mobile, matching reasoning rows; chevron now appears only when expanded --- .../src/components/chat/message/parts/ProgressiveGroup.tsx | 2 +- .../ui/src/components/chat/message/parts/ReasoningPart.tsx | 2 +- packages/ui/src/components/chat/message/parts/ToolPart.tsx | 7 +++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx index 83dfab3a..c155d8ad 100644 --- a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx +++ b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx @@ -26,7 +26,7 @@ import { areRenderRelevantPartsEqual } from '../renderCompare'; import { getExternalFaviconUrl } from '@/lib/url'; import { getDirectoryForFilePath, getRelativeFilePath, isFilePathWithinDirectory, normalizeFilePath, toAbsoluteFilePath } from '@/lib/path-utils'; -const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal'; +const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-5 sm:!leading-6 tracking-normal'; const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); diff --git a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx index 23f213ab..af7e56e5 100644 --- a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx +++ b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx @@ -12,7 +12,7 @@ import { MarkdownRenderer } from '../../MarkdownRenderer'; import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle'; import type { StreamPhase } from '../types'; -const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal'; +const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-5 sm:!leading-6 tracking-normal'; const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx index 5917b3f7..0fcf3b2b 100644 --- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx +++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx @@ -49,7 +49,7 @@ import { areRenderRelevantPartsEqual } from '../renderCompare'; import { useI18n } from '@/lib/i18n'; import { getDiffPatchEntries, getPatchText } from './toolDiffUtils'; -const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal'; +const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-5 sm:!leading-6 tracking-normal'; const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); @@ -1952,7 +1952,6 @@ const ToolPartContent: React.FC = ({ onToggle, syntaxTheme, isMobile, - alwaysShowActions = isMobile, onContentChange, onShowPopup, animateTailText = true, @@ -2712,7 +2711,7 @@ const ToolPartContent: React.FC = ({ className={cn( 'absolute inset-0 transition-opacity', isExpanded && 'opacity-0', - !isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0') + !isExpanded && 'group-hover/tool:opacity-0' )} style={iconStyle} > @@ -2723,7 +2722,7 @@ const ToolPartContent: React.FC = ({ className={cn( 'absolute inset-0 transition-opacity flex items-center justify-center', isExpanded && 'opacity-100', - !isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100') + !isExpanded && 'opacity-0 group-hover/tool:opacity-100' )} > {isExpanded ? : }