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

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

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>