From 33c012a49dc08fe3c726f071c811e8140ea134e3 Mon Sep 17 00:00:00 2001
From: "Jugal D. Bhatt" <55304795+jugaldb@users.noreply.github.com>
Date: Mon, 28 Jul 2025 17:28:10 -0700
Subject: [PATCH] fix scrolling issue (#13015)

---
 .../src/components/mcp_tools/mcp_tools.tsx      | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
index 4674fe36423..4500264f54f 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
@@ -181,14 +181,14 @@ const MCPToolsViewer = ({
   return (
     <div className="w-full h-screen p-4 bg-white">
       <Card className="w-full rounded-xl shadow-md overflow-hidden">
-        <div className="flex h-[80vh] w-full gap-4">
+        <div className="flex h-auto w-full gap-4">
           {/* Left Sidebar with Controls */}
           <div className="w-1/4 p-4 bg-gray-50 flex flex-col">
             <Title className="text-xl font-semibold mb-6 mt-2">MCP Tools</Title>
             
-            <div className="flex flex-col flex-1 space-y-6">
+            <div className="flex flex-col flex-1">
               {/* Tool Selection */}
-              <div className="flex flex-col flex-1">
+              <div className="flex flex-col flex-1 min-h-0">
                 <Text className="font-medium block mb-3 text-gray-700 flex items-center">
                   <ToolOutlined className="mr-2" /> Available Tools
                   {toolsData.length > 0 && (
@@ -231,7 +231,14 @@ const MCPToolsViewer = ({
 
                 {/* Tools List */}
                 {!isLoadingTools && !mcpToolsResponse?.error && toolsData.length > 0 && (
-                  <div className="space-y-2 flex-1 overflow-y-auto">
+                  <div 
+                    className="space-y-2 flex-1 overflow-y-auto min-h-0 mcp-tools-scrollable" 
+                    style={{ 
+                      maxHeight: '400px',
+                      scrollbarWidth: 'auto',
+                      scrollbarColor: '#cbd5e0 #f7fafc'
+                    }}
+                  >
                     {toolsData.map((tool: MCPTool) => (
                       <div
                         key={tool.name}
@@ -282,7 +289,7 @@ const MCPToolsViewer = ({
 
               {/* Authentication Section */}
               {mcpServerHasAuth(auth_type) && (
-                <div className="pt-4 border-t border-gray-200 flex-shrink-0">
+                <div className="pt-4 border-t border-gray-200 flex-shrink-0 mt-6">
                   <Text className="font-medium block mb-3 text-gray-700 flex items-center">
                     <SafetyOutlined className="mr-2" /> Authentication
                   </Text>