BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent descender clipping and show tool icon when collapsed on mobile

Browse Source 
- 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
This commit is contained in:
Bohdan Triapitsyn
2026-06-15 12:54:47 +03:00
parent e276dc8a5d
commit 8919d33636
3 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import { areRenderRelevantPartsEqual } from '../renderCompare';
import { getExternalFaviconUrl } from '@/lib/url'; import { getExternalFaviconUrl } from '@/lib/url';
import { getDirectoryForFilePath, getRelativeFilePath, isFilePathWithinDirectory, normalizeFilePath, toAbsoluteFilePath } from '@/lib/path-utils'; 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_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import { MarkdownRenderer } from '../../MarkdownRenderer';
import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle'; import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
import type { StreamPhase } from '../types'; 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_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+3 -4
View File
@@ -49,7 +49,7 @@ import { areRenderRelevantPartsEqual } from '../renderCompare';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
import { getDiffPatchEntries, getPatchText } from './toolDiffUtils'; 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_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS); const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
@@ -1952,7 +1952,6 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
onToggle, onToggle,
syntaxTheme, syntaxTheme,
isMobile, isMobile,
alwaysShowActions = isMobile,
onContentChange, onContentChange,
onShowPopup, onShowPopup,
animateTailText = true, animateTailText = true,
@@ -2712,7 +2711,7 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
className={cn( className={cn(
'absolute inset-0 transition-opacity', 'absolute inset-0 transition-opacity',
isExpanded && 'opacity-0', isExpanded && 'opacity-0',
!isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0') !isExpanded && 'group-hover/tool:opacity-0'
)} )}
style={iconStyle} style={iconStyle}
> >
@@ -2723,7 +2722,7 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
className={cn( className={cn(
'absolute inset-0 transition-opacity flex items-center justify-center', 'absolute inset-0 transition-opacity flex items-center justify-center',
isExpanded && 'opacity-100', isExpanded && 'opacity-100',
!isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100') !isExpanded && 'opacity-0 group-hover/tool:opacity-100'
)} )}
> >
{isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />} {isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />}