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 19348db0a6)

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} />);
 

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>