style(ui): match MCP Servers tabs to the dashboard's line tab pattern

[yuneng-berri]

TLDR

Problem this solves:

• MCP Servers tabs don't match any other page's tabs
• Full-width grey bar with a lone pill looks broken

How it solves it:

• Switch the tab bar to the shared line variant
• Same classes every other page-level tab bar uses

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)

No new tests: this is a class-only change with no behavior or markup-structure change, so the only test I could write would assert on Tailwind class strings, which fails the "would it catch a real break" bar. The existing mcp_servers.test.tsx suite (6 tests) passes unchanged before and after

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

Captured against a local proxy on :4000 with the dashboard dev server on :3001, signed in as a proxy admin with 7 MCP servers configured, at 1440x900. Both shots are the same session; the only difference between them is the tab CSS.

Steps to reproduce locally:

1. Start the proxy: python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload --use_v2_migration_resolver 2>&1 | tee litellm.log
2. Start the dashboard dev server: npm run dev in ui/litellm-dashboard
3. Go to http://localhost:3000/?page=mcp-servers as a proxy admin, so all six tabs render
4. Before (commit 215f0558): the tab strip is a full-width grey bar with a single white pill around "All Servers"
5. After (commit 2ce59007): the tab strip is a left-aligned row over a single bottom rule, with "All Servers" underlined
6. Click through Toolsets, Connect, Semantic Filter, Network Settings and Submitted MCPs; the underline should follow the active tab and the "New" badge should stay inline with the "Submitted MCPs" label

Type

🧹 Refactoring

Changes

The MCP Servers page was the only page-level tab bar still using the default (segmented) TabsList stretched with w-full. That variant carries bg-muted and is built to hug its content via w-fit, so forcing it full-width renders the muted background across the whole page with one small active pill parked on the left.

Every other page-level tab bar in the dashboard already uses the line variant with h-auto w-full justify-start rounded-none border-b p-0 on the list and flex-none rounded-none px-4 py-2 on each trigger; budgets, vector stores, access groups, organizations, routing groups, API reference and the chat MCP apps panel all share it. The MCP page now does the same.

One small cleanup in the same element: the <span className="flex items-center gap-2"> that wrapped the "Submitted MCPs" label and its NewBadge is gone, replaced by gap-2 on the trigger itself. TabsTrigger is already an inline-flex row, so the wrapper was doing nothing the trigger doesn't already do; this matches how access groups renders badges inside triggers.

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

[greptile-apps]

Greptile Summary

Updates the MCP Servers tab bar to use the dashboard’s shared line-tab styling and simplifies the Submitted MCPs badge layout

Confidence Score: 5/5

The PR appears safe to merge with no actionable regressions identified

The selected Tabs variant is supported by the shared primitive, the class pattern matches existing dashboard tab bars, and moving the badge into the trigger preserves the existing inline-flex layout

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx	Applies the established line-tab classes to the MCP Servers tabs without changing tab behavior or content

_{Reviews (1): Last reviewed commit: "Merge remote-tracking branch 'origin/lit..." | Re-trigger Greptile}