Skip to content

Commit a21c914

Browse files
authored
🤖 Shrink file_read tool display based on container width (#421)
Use container queries to show abbreviated byte count when space is limited: - Narrow: `1.2KB` - Medium: `read 1.2KB` - Wide: `read 1.2KB of 5.4KB` Prevents line-breaking in the tool header while maximizing detail when space allows. _Generated with `cmux`_
1 parent 6db7e18 commit a21c914

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

src/components/tools/FileReadToolCall.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
7575
const parsedContent = result?.success && result.content ? parseFileContent(result.content) : null;
7676

7777
return (
78-
<ToolContainer expanded={expanded}>
78+
<ToolContainer expanded={expanded} className="@container">
7979
<ToolHeader onClick={toggleExpanded}>
8080
<ExpandIcon expanded={expanded}></ExpandIcon>
8181
<TooltipWrapper inline>
@@ -84,8 +84,10 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
8484
</TooltipWrapper>
8585
<span className="text-text font-monospace max-w-96 truncate">{filePath}</span>
8686
{result && result.success && parsedContent && (
87-
<span className="text-secondary ml-2 text-[10px]">
88-
read {formatBytes(parsedContent.actualBytes)} of {formatBytes(result.file_size)}
87+
<span className="text-secondary ml-2 text-[10px] whitespace-nowrap">
88+
<span className="hidden @sm:inline">read </span>
89+
{formatBytes(parsedContent.actualBytes)}
90+
<span className="hidden @lg:inline"> of {formatBytes(result.file_size)}</span>
8991
</span>
9092
)}
9193
<StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>

0 commit comments

Comments
 (0)