fix: Make the entire toolcall argument row clickable to expand (#3118)

ui/desktop/src/components/ToolCallArguments.tsx

@@ -39,20 +39,28 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
 
       return (
         <div className="text-sm mb-2">
-          <div className="flex flex-row">
+          <div className="flex flex-row items-stretch">
-            <span className="text-textSubtle min-w-[140px]">{key}</span>
+            <button
-            <div className="w-full flex justify-between items-start">
+              onClick={() => toggleKey(key)}
+              className="flex text-left text-textSubtle min-w-[140px]"
+            >
+              <span>{key}</span>
+            </button>
+            <div className="w-full flex items-stretch">
               {isExpanded ? (
-                <div className="">
+                <div>
                   <MarkdownContent content={value} className="text-sm text-textPlaceholder" />
                 </div>
               ) : (
-                <span className="text-textPlaceholder mr-2">{value.slice(0, 60)}...</span>
+                <button onClick={() => toggleKey(key)} className="text-left text-textPlaceholder">
+                  {value.slice(0, 60)}...
+                </button>
               )}
               <button
                 onClick={() => toggleKey(key)}
-                className="hover:opacity-75 text-textPlaceholder pr-2"
+                className="flex flex-row items-stretch grow text-textPlaceholder pr-2"
               >
+                <div className="min-w-2 grow" />
                 <Expand size={5} isExpanded={isExpanded} />
               </button>
             </div>

ui/desktop/src/components/ui/Expand.tsx

@@ -3,7 +3,7 @@ import { ChevronUp } from 'lucide-react';
 export default function Expand({ size, isExpanded }: { size: number; isExpanded: boolean }) {
   return (
     <ChevronUp
-      className={`w-${size} h-${size} text-textPlaceholder transition-all origin-center ${isExpanded ? 'rotate-180' : 'rotate-90'}`}
+      className={`shrink-0 w-${size} h-${size} text-textPlaceholder transition-all origin-center ${isExpanded ? 'rotate-180' : 'rotate-90'}`}
     />
   );
 }