From a82ed057ab50d4e6c3cef192ca2b2892b4332142 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patr=C3=ADcio=20Martins?= <eupatriciomartins@gmail.com>
Date: Mon, 15 Dec 2025 11:14:08 -0300
Subject: [PATCH] feat: add independent vertical scroll to Tools tab columns

---
 client/src/components/ListPane.tsx | 12 ++++++------
 client/src/components/ToolsTab.tsx | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 8cc2c1fe7..83d950fde 100644
--- a/client/src/components/ListPane.tsx
+++ b/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,10 +92,10 @@ 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}
         >
@@ -103,13 +103,13 @@ const ListPane = <T extends object>({
         </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}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 047d327e5..74d72ef6d 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/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 && (