From e2cb701fd90ee70db59e311ccc4ba676d51169e9 Mon Sep 17 00:00:00 2001
From: Jugal Bhatt <jugalbhatt3@gmail.com>
Date: Tue, 1 Jul 2025 11:10:45 -0700
Subject: [PATCH] added changes to mcp url wrapping

add mcp server url wrapping

Add mcp url wrapping
---
 .../src/components/mcp_tools/mcp_server_view.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
index 2fe60fb0bb..be2faf56ac 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
@@ -45,7 +45,7 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
   };
 
   return (
-    <div className="p-4">
+    <div className="p-4 max-w-full">
       <div className="flex justify-between items-center mb-6">
         <div>
           <Button onClick={onBack} className="mb-4">
@@ -86,7 +86,9 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
 
               <Card>
                 <Text>Host Url</Text>
-                <div className="mt-2 flex flex-wrap gap-2">{mcpServer.url}</div>
+                <div className="mt-2">
+                  <Text className="break-all overflow-wrap-anywhere">{mcpServer.url}</Text>
+                </div>
               </Card>
             </Grid>
           </TabPanel>
@@ -132,7 +134,7 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
                   </div>
                   <div>
                     <Text className="font-medium">URL</Text>
-                    <div className="font-mono">{mcpServer.url}</div>
+                    <div className="font-mono break-all overflow-wrap-anywhere max-w-full">{mcpServer.url}</div>
                   </div>
                   <div>
                     <Text className="font-medium">Transport</Text>