From 456e326c950d0f1d37782b3eea31da890ad44f40 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Sat, 21 Mar 2026 13:11:22 -0700
Subject: [PATCH] fix(ui): reduce MCP table columns and add explicit column
 widths

Removed low-value columns (Alias, Auth Type, Updated) to reduce
horizontal overflow. Added explicit size hints to remaining columns.
DataTable now applies column sizes to header and body cells.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../mcp_tools/mcp_server_columns.tsx          | 61 ++++++-------------
 .../src/components/view_logs/table.tsx        |  7 ++-
 2 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index a86dc1c157e..22108292e05 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -97,6 +97,7 @@ export const mcpServerColumns = (
   {
     accessorKey: "server_id",
     header: "Server ID",
+    size: 90,
     enableSorting: true,
     cell: ({ row }) => (
       <button
@@ -110,12 +111,13 @@ export const mcpServerColumns = (
   {
     accessorKey: "server_name",
     header: "Name",
+    size: 150,
     enableSorting: true,
     cell: ({ row }) => {
       const logoUrl = row.original.mcp_info?.logo_url;
       const name = row.original.server_name;
       return (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 truncate">
           {logoUrl ? (
             <img
               src={logoUrl}
@@ -124,7 +126,7 @@ export const mcpServerColumns = (
               onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
             />
           ) : null}
-          <span>{name}</span>
+          <span className="truncate">{name}</span>
         </div>
       );
     },
@@ -139,6 +141,7 @@ export const mcpServerColumns = (
         </Tooltip>
       </span>
     ),
+    size: 130,
     enableSorting: true,
     cell: ({ row }) => {
       const tid = row.original.team_id;
@@ -148,31 +151,28 @@ export const mcpServerColumns = (
       const alias = teamAliasMap?.get(tid);
       return (
         <Tooltip title={tid}>
-          <span className="text-sm">{alias || tid.slice(0, 8) + "..."}</span>
+          <span className="text-sm truncate block">{alias || tid.slice(0, 8) + "..."}</span>
         </Tooltip>
       );
     },
   },
-  {
-    accessorKey: "alias",
-    header: "Alias",
-    enableSorting: true,
-  },
   {
     id: "url",
     header: "URL",
+    size: 180,
     cell: ({ row }) => {
       const url = row.original.url;
       if (!url) {
         return <span className="text-gray-400">—</span>;
       }
       const { maskedUrl } = getMaskedAndFullUrl(url);
-      return <span className="font-mono text-sm">{maskedUrl}</span>;
+      return <span className="font-mono text-sm truncate block">{maskedUrl}</span>;
     },
   },
   {
     accessorKey: "transport",
     header: "Transport",
+    size: 80,
     enableSorting: true,
     cell: ({ row }) => {
       const transport = row.original.transport || "http";
@@ -186,22 +186,10 @@ export const mcpServerColumns = (
       );
     },
   },
-  {
-    accessorKey: "auth_type",
-    header: "Auth Type",
-    enableSorting: true,
-    cell: ({ getValue }) => {
-      const authType = (getValue() as string) || "none";
-      return (
-        <span className="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded border bg-gray-50 text-gray-700 border-gray-200">
-          {authType}
-        </span>
-      );
-    },
-  },
   {
     id: "health_status",
-    header: "Health Status",
+    header: "Health",
+    size: 80,
     cell: ({ row }) => (
       <HealthStatusBadge
         server={row.original}
@@ -214,6 +202,7 @@ export const mcpServerColumns = (
   {
     id: "mcp_access_groups",
     header: "Access Groups",
+    size: 130,
     cell: ({ row }) => {
       const groups = row.original.mcp_access_groups;
       if (Array.isArray(groups) && groups.length > 0) {
@@ -221,8 +210,8 @@ export const mcpServerColumns = (
           const joined = groups.join(", ");
           return (
             <Tooltip title={joined}>
-              <div className="flex items-center gap-1 max-w-[200px]">
-                <span className="inline-flex items-center text-xs font-medium px-1.5 py-0.5 rounded bg-gray-100 text-gray-700 border border-gray-200 truncate max-w-[140px]">
+              <div className="flex items-center gap-1">
+                <span className="inline-flex items-center text-xs font-medium px-1.5 py-0.5 rounded bg-gray-100 text-gray-700 border border-gray-200 truncate max-w-[100px]">
                   {groups[0]}
                 </span>
                 {groups.length > 1 && (
@@ -238,7 +227,8 @@ export const mcpServerColumns = (
   },
   {
     id: "available_on_public_internet",
-    header: "Network Access",
+    header: "Network",
+    size: 80,
     cell: ({ row }) => {
       const isPublic = row.original.available_on_public_internet;
       return isPublic ? (
@@ -257,6 +247,7 @@ export const mcpServerColumns = (
   {
     header: "Created",
     accessorKey: "created_at",
+    size: 90,
     enableSorting: true,
     sortingFn: "datetime",
     cell: ({ row }) => {
@@ -270,25 +261,10 @@ export const mcpServerColumns = (
       );
     },
   },
-  {
-    header: "Updated",
-    accessorKey: "updated_at",
-    enableSorting: true,
-    sortingFn: "datetime",
-    cell: ({ row }) => {
-      const server = row.original;
-      if (!server.updated_at) return <span className="text-xs text-gray-400">—</span>;
-      const date = new Date(server.updated_at);
-      return (
-        <Tooltip title={date.toLocaleString()}>
-          <span className="text-xs text-gray-600">{date.toLocaleDateString()}</span>
-        </Tooltip>
-      );
-    },
-  },
   {
     id: "byok_credential",
     header: "Credential",
+    size: 90,
     cell: ({ row }) => {
       const server = row.original;
       if (!server.is_byok) {
@@ -324,6 +300,7 @@ export const mcpServerColumns = (
   {
     id: "actions",
     header: "Actions",
+    size: 70,
     cell: ({ row }) => (
       <div className="flex items-center gap-1">
         <Tooltip title="Edit">
diff --git a/ui/litellm-dashboard/src/components/view_logs/table.tsx b/ui/litellm-dashboard/src/components/view_logs/table.tsx
index 38c00490b78..bc95a74e99f 100644
--- a/ui/litellm-dashboard/src/components/view_logs/table.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/table.tsx
@@ -65,9 +65,10 @@ export function DataTable<TData, TValue>({
                 const isSorted = header.column.getIsSorted();
                 
                 return (
-                  <TableHeaderCell 
-                    key={header.id} 
+                  <TableHeaderCell
+                    key={header.id}
                     className={`py-1 h-8 ${canSort ? 'cursor-pointer select-none hover:bg-gray-50' : ''}`}
+                    style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
                     onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
                   >
                     {header.isPlaceholder ? null : (
@@ -103,7 +104,7 @@ export function DataTable<TData, TValue>({
                   onClick={() => onRowClick?.(row.original)}
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className="py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap">
+                    <TableCell key={cell.id} className="py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap" style={{ width: cell.column.getSize() !== 150 ? cell.column.getSize() : undefined }}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}