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 4d84fef9266..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 @@ -121,6 +121,17 @@ describe("MCPDiscovery", () => { 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(); + 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(); 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 45632f4b775..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 @@ -110,7 +110,7 @@ const MCPDiscovery: React.FC = ({ MCP Logo Add MCP Server -