From 392ca37812b2f952db97e14fbc91fa7ec32b83e3 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng@berri.ai>
Date: Mon, 27 Jul 2026 09:45:52 -0700
Subject: [PATCH] Merge pull request #34679 from
 BerriAI/litellm_/modal-size-restoration-c06977

fix(ui): restore the Add MCP Server dialog size and header spacing

(cherry picked from commit 19348db0a6e13585f98c298da7fdd4c51546a642)
---
 .../_components/mcp_discovery.test.tsx        | 22 +++++++++++++++++++
 .../mcp-servers/_components/mcp_discovery.tsx |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
index 4e2456ab7a4..f9a75813bda 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
@@ -110,6 +110,28 @@ describe("MCPDiscovery", () => {
     expect(await screen.findByText(/No servers found/)).toBeInTheDocument();
   });
 
+  it("keeps the wide dialog width the antd modal had", async () => {
+    render(<MCPDiscovery {...defaultProps} />);
+    await screen.findByText("GitHub");
+
+    const dialog = document.querySelector("[data-slot='dialog-content']");
+    const width = Array.from(dialog?.classList ?? []).filter((c) => c.includes("max-w-"));
+
+    expect(width).toContain("sm:max-w-[1000px]");
+    expect(width).not.toContain("sm:max-w-md");
+  });
+
+  // The close button is absolutely positioned, so it is out of flow and the header
+  // row lays out as if it were not there. Without a reserved margin the custom-server
+  // action sits underneath it. jsdom has no layout engine, so this pins the class.
+  it("keeps the custom-server action clear of the close button", async () => {
+    render(<MCPDiscovery {...defaultProps} />);
+    await screen.findByText("GitHub");
+
+    expect(document.querySelector("[data-slot='dialog-close']")).toHaveClass("absolute");
+    expect(screen.getByRole("button", { name: "+ Custom Server" })).toHaveClass("mr-8");
+  });
+
   it("does not fetch while hidden", () => {
     render(<MCPDiscovery {...defaultProps} isVisible={false} />);
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
index b2c181a9112..5094f1a6761 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
@@ -103,14 +103,14 @@ const MCPDiscovery: React.FC<MCPDiscoveryProps> = ({
 
   return (
     <Dialog open={isVisible} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-[1000px]">
+      <DialogContent className="sm:max-w-[1000px]">
         <DialogHeader>
           <div className="flex items-center justify-between border-b border-border pb-4">
             <div className="flex items-center space-x-3">
               <img src={resolveLogoSrc(mcpLogoImg)} alt="MCP Logo" className="mr-2 size-5 object-contain" />
               <DialogTitle className="text-xl font-semibold">Add MCP Server</DialogTitle>
             </div>
-            <Button variant="link" size="sm" onClick={onCustomServer}>
+            <Button variant="link" size="sm" className="mr-8" onClick={onCustomServer}>
               + Custom Server
             </Button>
           </div>