fix(ui): restore the Add MCP Server dialog size and header spacing

[yuneng-berri]

TLDR

Problem this solves:

• Add MCP Server dialog renders 448px wide, not 1000px
• Category pills wrap to three rows, server names truncate
• "+ Custom Server" sits underneath the close button

How it solves it:

• Prefix the width override so tailwind-merge drops the base clamp
• Reserve right margin on the header action for the close button

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Both regressions are visible on the MCP Servers page. To capture before and after:

1. Start the proxy: python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload
2. Start the dashboard dev server: npm run dev in ui/litellm-dashboard
3. Check out 215f05588d (before this branch) and open http://localhost:3000/?page=mcp-servers
4. Click "Add New MCP Server" and screenshot the dialog at a 1280px-wide window: the box is 448px, the category pills wrap onto three rows, "Atlassian (Jira & ..." truncates, and "+ Custom Server" runs under the X
5. Check out this branch at a3f81eddcd, reload, and repeat step 4: the box is 1000px, the pills sit on one row, names are no longer truncated, and the X clears the "+ Custom Server" button

Type

🐛 Bug Fix

Changes

The shadcn migration in 428d23249a translated the antd Modal prop width={1000} into className="max-w-[1000px]" on DialogContent. The base DialogContent already carries sm:max-w-md, and tailwind-merge treats a responsive variant as a distinct group, so it kept both classes; from 640px up the sm: rule wins the cascade and the dialog collapses to 448px. Prefixing the override as sm:max-w-[1000px] lets the merge drop the base clamp. The unprefixed max-w-[calc(100%-2rem)] in the base is untouched, so the dialog still fits below 640px.

Separately, the header's justify-between row pins "+ Custom Server" to the content edge 24px in, while DialogContent's close button is absolutely positioned 16px in at 32px wide. Being out of flow, the close button reserves no space, so it overlays the rightmost 24px of the content box and lands on the action. A right margin on the action clears it; keeping that margin on the button rather than the row leaves the header rule full-bleed.

Both are pinned by tests in mcp_discovery.test.tsx, each verified to fail with its fix reverted. jsdom has no layout engine, so they assert the class contract rather than a computed width.

I swept the rest of the dashboard: this was the only DialogContent passing an unprefixed max-w, and the only DialogHeader with a justify-between action row, so no other dialog carries either bug.

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR
  Before:

After:

[greptile-apps]

Greptile Summary

Restores the Add MCP Server dialog’s intended desktop width and prevents its custom-server action from overlapping the close control.

• Replaces the conflicting responsive maximum-width class with sm:max-w-[1000px].
• Reserves space beside the header action using a right margin.
• Adds regression tests for the merged width classes and close-button clearance.

Confidence Score: 5/5

The PR appears safe to merge, with both targeted layout regressions addressed by focused styling changes and regression coverage.

The responsive width override now replaces the conflicting base breakpoint class, and the header action reserves sufficient space for the existing absolutely positioned close control.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx	Correctly overrides the dialog’s responsive width clamp and reserves header space for the absolutely positioned close control.
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx	Adds focused class-contract regression coverage for both layout fixes without weakening existing assertions.

_{Reviews (1): Last reviewed commit: "Merge branch 'litellm_internal_staging' ..." | Re-trigger Greptile}