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 = ({
Add MCP Server
-