From 2ce590077037fd9ec67cdc67b92ac2e351e4db7d Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 25 Jul 2026 17:43:53 -0700
Subject: [PATCH] style(ui): match MCP Servers tabs to the dashboard's line tab
 pattern

The MCP Servers page was the only page-level tab bar using the segmented
(pill) TabsList stretched with w-full, which rendered a full-width grey
bar with a lone pill on the left. Every other page-level tab bar
(budgets, vector stores, access groups, organizations, routing groups,
API reference) uses the underlined line variant, so use that here too.
---
 .../mcp-servers/_components/mcp_servers.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
index 79bc6a9bb37..ebb1d710bf2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
@@ -517,31 +517,29 @@ const MCPServers: React.FC<MCPServerProps> = ({ accessToken, userRole, userID })
           accessToken={accessToken}
         />
         <Tabs defaultValue="servers" className="mt-2 w-full">
-          <TabsList className="w-full justify-start">
-            <TabsTrigger value="servers" className="flex-none">
+          <TabsList variant="line" className="h-auto w-full justify-start rounded-none border-b p-0">
+            <TabsTrigger value="servers" className="flex-none rounded-none px-4 py-2">
               All Servers
             </TabsTrigger>
-            <TabsTrigger value="toolsets" className="flex-none">
+            <TabsTrigger value="toolsets" className="flex-none rounded-none px-4 py-2">
               Toolsets
             </TabsTrigger>
-            <TabsTrigger value="connect" className="flex-none">
+            <TabsTrigger value="connect" className="flex-none rounded-none px-4 py-2">
               Connect
             </TabsTrigger>
             {isAdminRole(userRole) && (
-              <TabsTrigger value="semantic-filter" className="flex-none">
+              <TabsTrigger value="semantic-filter" className="flex-none rounded-none px-4 py-2">
                 Semantic Filter
               </TabsTrigger>
             )}
             {isAdminRole(userRole) && (
-              <TabsTrigger value="network-settings" className="flex-none">
+              <TabsTrigger value="network-settings" className="flex-none rounded-none px-4 py-2">
                 Network Settings
               </TabsTrigger>
             )}
             {isAdminRole(userRole) && (
-              <TabsTrigger value="submitted" className="flex-none">
-                <span className="flex items-center gap-2">
-                  Submitted MCPs <NewBadge />
-                </span>
+              <TabsTrigger value="submitted" className="flex-none gap-2 rounded-none px-4 py-2">
+                Submitted MCPs <NewBadge />
               </TabsTrigger>
             )}
           </TabsList>