From 6f7855b5e07b5ee578460ede9dd90284587bb84b Mon Sep 17 00:00:00 2001
From: Oliver <opopadich@squareup.com>
Date: Fri, 27 Jun 2025 12:50:02 -0500
Subject: [PATCH] fix: Make the entire toolcall argument row clickable to
 expand (#3118)

---
 .../src/components/ToolCallArguments.tsx      | 20 +++++++++++++------
 ui/desktop/src/components/ui/Expand.tsx       |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/desktop/src/components/ToolCallArguments.tsx b/ui/desktop/src/components/ToolCallArguments.tsx
index b2e31a1f..3d2c5f0b 100644
--- a/ui/desktop/src/components/ToolCallArguments.tsx
+++ b/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">
-            <span className="text-textSubtle min-w-[140px]">{key}</span>
-            <div className="w-full flex justify-between items-start">
+          <div className="flex flex-row items-stretch">
+            <button
+              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>
diff --git a/ui/desktop/src/components/ui/Expand.tsx b/ui/desktop/src/components/ui/Expand.tsx
index 0529248b..23a4d937 100644
--- a/ui/desktop/src/components/ui/Expand.tsx
+++ b/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'}`}
     />
   );
 }