feat: add independent vertical scroll to Tools tab columns

Author: patriciomartinns

client/src/components/ListPane.tsx

@@ -56,8 +56,8 @@ const ListPane = <T extends object>({
   };
 
   return (
-    <div className="bg-card border border-border rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200 dark:border-border">
+    <div className="bg-card border border-border rounded-lg shadow h-full flex flex-col overflow-hidden">
+      <div className="p-4 border-b border-gray-200 dark:border-border flex-shrink-0">
         <div className="flex items-center justify-between gap-4">
           <h3 className="font-semibold dark:text-white flex-shrink-0">
             {title}
@@ -92,24 +92,24 @@ const ListPane = <T extends object>({
           </div>
         </div>
       </div>
-      <div className="p-4">
+      <div className="p-4 flex flex-col flex-1 overflow-hidden">
         <Button
           variant="outline"
-          className="w-full mb-4"
+          className="w-full mb-4 flex-shrink-0"
           onClick={listItems}
           disabled={isButtonDisabled}
         >
           {buttonText}
         </Button>
         <Button
           variant="outline"
-          className="w-full mb-4"
+          className="w-full mb-4 flex-shrink-0"
           onClick={clearItems}
           disabled={items.length === 0}
         >
           Clear
         </Button>
-        <div className="space-y-2 overflow-y-auto max-h-96">
+        <div className="space-y-2 overflow-y-auto flex-1">
           {filteredItems.map((item, index) => (
             <div
               key={index}

client/src/components/ToolsTab.tsx

@@ -149,8 +149,8 @@ const ToolsTab = ({
   });
 
   return (
-    <TabsContent value="tools">
-      <div className="grid grid-cols-2 gap-4">
+    <TabsContent value="tools" className="h-[calc(100vh-16rem)]">
+      <div className="grid grid-cols-2 gap-4 h-full">
         <ListPane
           items={tools}
           listItems={listTools}
@@ -178,8 +178,8 @@ const ToolsTab = ({
           isButtonDisabled={!nextCursor && tools.length > 0}
         />
 
-        <div className="bg-card border border-border rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-border">
+        <div className="bg-card border border-border rounded-lg shadow h-full flex flex-col overflow-hidden">
+          <div className="p-4 border-b border-gray-200 dark:border-border flex-shrink-0">
             <div className="flex items-center gap-2">
               {selectedTool && (
                 <IconDisplay
@@ -192,7 +192,7 @@ const ToolsTab = ({
               </h3>
             </div>
           </div>
-          <div className="p-4">
+          <div className="p-4 overflow-y-auto flex-1">
             {selectedTool ? (
               <div className="space-y-4">
                 {error && (