🤖 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`_

Author: ammar-agent

src/components/tools/FileReadToolCall.tsx

@@ -75,7 +75,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
   const parsedContent = result?.success && result.content ? parseFileContent(result.content) : null;
 
   return (
-    <ToolContainer expanded={expanded}>
+    <ToolContainer expanded={expanded} className="@container">
       <ToolHeader onClick={toggleExpanded}>
         <ExpandIcon expanded={expanded}>▶</ExpandIcon>
         <TooltipWrapper inline>
@@ -84,8 +84,10 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
         </TooltipWrapper>
         <span className="text-text font-monospace max-w-96 truncate">{filePath}</span>
         {result && result.success && parsedContent && (
-          <span className="text-secondary ml-2 text-[10px]">
-            read {formatBytes(parsedContent.actualBytes)} of {formatBytes(result.file_size)}
+          <span className="text-secondary ml-2 text-[10px] whitespace-nowrap">
+            <span className="hidden @sm:inline">read </span>
+            {formatBytes(parsedContent.actualBytes)}
+            <span className="hidden @lg:inline"> of {formatBytes(result.file_size)}</span>
           </span>
         )}
         <StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>