From a3f81eddcd02dd19330e16eae3df6651be90d231 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 25 Jul 2026 18:38:06 -0700
Subject: [PATCH] fix(ui): stop the custom-server action colliding with the
 dialog close button

DialogContent's close button is absolutely positioned 16px from the right
edge at 32px wide, so it overlays the rightmost 24px of the p-6 content
box. The justify-between header pins "+ Custom Server" to that same edge
and, being out of flow, the close button reserves nothing. Give the action
a right margin that clears it; keeping the margin on the button rather
than the row leaves the header rule full-bleed
---
 .../mcp-servers/_components/mcp_discovery.test.tsx    | 11 +++++++++++
 .../mcp-servers/_components/mcp_discovery.tsx         |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

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(<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 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<MCPDiscoveryProps> = ({
               <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>