From 299aa6cfc845ccc3f88cb04cb94a4c359219b63c Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng@berri.ai>
Date: Mon, 27 Jul 2026 09:45:07 -0700
Subject: [PATCH] Merge pull request #34685 from
 BerriAI/litellm_/mcp-tabs-styling-dd340c

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

(cherry picked from commit 63d6d8a37bbd8112118695236adca707ba5f0beb)
---
 .../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>