feat: replace inline edit/delete buttons with dropdown menu in model limits table

ui/app/workspace/logs/page.tsx

@@ -490,7 +490,11 @@ export default function LogsPage() {
 		togglePin: toggleColumnPin,
 		reorder: reorderColumns,
 		reset: resetColumns,
-	} = useColumnConfig({ columnIds, paramName: "cols" });
+	} = useColumnConfig({
+		columnIds,
+		paramName: "cols",
+		fixedColumns: hasDeleteAccess ? { right: ["actions"] } : undefined,
+	});
 
 	// Navigation for log detail sheet
 	const logs = logsData?.logs ?? [];
@@ -730,4 +734,4 @@ export default function LogsPage() {
 			)}
 		</div>
 	);
-}
+}

ui/app/workspace/logs/views/columns.tsx

@@ -5,6 +5,12 @@ import {
 } from "@/app/workspace/dashboard/utils/chartUtils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdownMenu";
 import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
 import {
   getProviderLabel,
@@ -22,7 +28,7 @@ import {
 import { cn } from "@/lib/utils";
 import { ColumnDef } from "@tanstack/react-table";
 import { format, formatDistanceToNow } from "date-fns";
-import { ArrowUpDown, Trash2 } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal, Trash2 } from "lucide-react";
 
 function getAssistantToolCallSummary(log?: LogEntry): string {
   const toolCalls = log?.output_message?.tool_calls || [];
@@ -476,20 +482,40 @@ export const createColumns = (
     ? [
       {
         id: "actions",
-        size: 72,
+        header: "",
+        size: 56,
         cell: ({ row }) => {
           const log = row.original;
           return (
-            <Button
-              variant="outline"
-              size="icon"
-              data-testid="log-delete-btn"
-              aria-label="Delete log"
-              className="text-destructive/60 border-destructive/60 hover:text-destructive hover:bg-destructive/10"
-              onClick={() => onDelete(log)}
-            >
-              <Trash2 strokeWidth={1.5} />
-            </Button>
+            <div className="flex justify-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild onClick={(event) => event.stopPropagation()}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    data-testid="log-actions-btn"
+                    aria-label="Log actions"
+                    className="h-7 w-7"
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    variant="destructive"
+                    className="cursor-pointer"
+                    data-testid="log-delete-btn"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onDelete(log);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           );
         },
       },

ui/app/workspace/logs/views/logsTable.tsx

@@ -59,7 +59,7 @@ export function LogsDataTable({
 	const tableContainerRef = useRef<HTMLDivElement>(null);
 	const calculatedPageSize = useTablePageSize(tableContainerRef);
 
-	const fixedColumnIds = useMemo(() => new Set<string>([]), []);
+	const fixedColumnIds = useMemo(() => new Set<string>(["actions"]), []);
 
 	// Measure actual header cell widths for pixel-perfect pin offsets
 	const { headerCellRefs, setHeaderCellRef } = useHeaderCellRefs();
@@ -279,4 +279,4 @@ export function LogsDataTable({
 			</div>
 		</div>
 	);
-}
+}

ui/app/workspace/mcp-logs/page.tsx

@@ -1,3 +1,4 @@
+import { LogsVolumeChart } from "@/app/workspace/logs/views/logsVolumeChart";
 import { MCPFilterSidebar } from "@/components/filters/mcpFilterSidebar";
 import FullPageLoader from "@/components/fullPageLoader";
 import { useColumnConfig } from "@/components/table";
@@ -10,7 +11,6 @@ import {
   useGetMCPLogsQuery,
   useGetMCPLogsStatsQuery,
 } from "@/lib/store";
-import { LogsVolumeChart } from "@/app/workspace/logs/views/logsVolumeChart";
 import { useLazyGetMCPLogsQuery } from "@/lib/store/apis/mcpLogsApi";
 import type {
   MCPToolLogEntry,
@@ -108,9 +108,9 @@ export default function MCPLogsPage() {
       ...(urlState.period
         ? { period: urlState.period }
         : {
-            start_time: dateUtils.toISOString(urlState.start_time),
-            end_time: dateUtils.toISOString(urlState.end_time),
-          }),
+          start_time: dateUtils.toISOString(urlState.start_time),
+          end_time: dateUtils.toISOString(urlState.end_time),
+        }),
     }),
     [
       urlState.tool_names,
@@ -396,17 +396,6 @@ export default function MCPLogsPage() {
     [columns],
   );
 
-  const MCP_COLUMN_LABELS: Record<string, string> = useMemo(
-    () => ({
-      timestamp: "Time",
-      tool_name: "Tool Name",
-      server_label: "Server",
-      latency: "Latency",
-      cost: "Cost",
-    }),
-    [],
-  );
-
   const {
     entries: columnEntries,
     columnOrder,
@@ -419,9 +408,20 @@ export default function MCPLogsPage() {
   } = useColumnConfig({
     columnIds,
     paramName: "mcp_cols",
-    fixedColumns: { left: [], right: [] },
+    fixedColumns: hasDeleteAccess ? { right: ["actions"] } : undefined,
   });
 
+  const MCP_COLUMN_LABELS: Record<string, string> = useMemo(
+    () => ({
+      timestamp: "Time",
+      tool_name: "Tool Name",
+      server_label: "Server",
+      latency: "Latency",
+      cost: "Cost",
+    }),
+    [],
+  );
+
   const selectedLogIndex = useMemo(
     () => (selectedLogId ? logs.findIndex((l) => l.id === selectedLogId) : -1),
     [selectedLogId, logs],

ui/app/workspace/mcp-logs/views/columns.tsx

@@ -1,10 +1,11 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdownMenu";
 import { Status, StatusBarColors, Statuses } from "@/lib/constants/logs";
 import type { MCPToolLogEntry } from "@/lib/types/logs";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { format, isValid } from "date-fns";
-import { ArrowUpDown, Trash2 } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal, Trash2 } from "lucide-react";
 
 // Helper function to validate status and return a safe Status value
 const getValidatedStatus = (status: string): Status => {
@@ -99,20 +100,34 @@ export const createMCPColumns = (
 			? [
 				{
 					id: "actions",
-					size: 72,
+					header: "",
+					size: 56,
 					cell: ({ row }: { row: Row<MCPToolLogEntry> }) => {
 						const log = row.original;
 						return (
-							<Button
-								variant="outline"
-								size="icon"
-								data-testid="log-delete-btn"
-								aria-label="Delete log"
-								className="text-destructive/60 border-destructive/60 hover:text-destructive hover:bg-destructive/10"
-								onClick={() => void handleDelete(log)}
-							>
-								<Trash2 />
-							</Button>
+							<div className="flex justify-center">
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild onClick={(event) => event.stopPropagation()}>
+										<Button variant="ghost" size="icon" data-testid="log-actions-btn" aria-label="Log actions" className="h-7 w-7">
+											<MoreHorizontal className="h-4 w-4" />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end">
+										<DropdownMenuItem
+											variant="destructive"
+											className="cursor-pointer"
+											data-testid="log-delete-btn"
+											onClick={(event) => {
+												event.stopPropagation();
+												void handleDelete(log);
+											}}
+										>
+											<Trash2 className="h-4 w-4" />
+											Delete
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</div>
 						);
 					},
 				},

ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx

@@ -56,7 +56,7 @@ export function MCPLogsDataTable({
 }: DataTableProps) {
 	const [sorting, setSorting] = useState<SortingState>([{ id: pagination.sort_by, desc: pagination.order === "desc" }]);
 
-	const fixedColumnIds = useMemo(() => new Set<string>([]), []);
+	const fixedColumnIds = useMemo(() => new Set<string>(["actions"]), []);
 
 	// Measure actual header cell widths for pixel-perfect pin offsets
 	const { headerCellRefs, setHeaderCellRef } = useHeaderCellRefs();
@@ -188,7 +188,7 @@ export function MCPLogsDataTable({
 													key={cell.id}
 													style={{ width: size, minWidth: size, maxWidth: size, ...buildPinStyle(cell.column, pinOffsets) }}
 													className={cn(
-														"overflow-hidden",
+														!pinned && "overflow-hidden",
 														pinned && "bg-card",
 														cell.column.id === lastLeftPinId && PIN_SHADOW_LEFT,
 														cell.column.id === firstRightPinId && PIN_SHADOW_RIGHT,
@@ -250,4 +250,4 @@ export function MCPLogsDataTable({
 			</div>
 		</div>
 	);
-}
+}

ui/app/workspace/model-catalog/views/modelCatalogTable.tsx

@@ -92,7 +92,13 @@ export default function ModelCatalogTable({
 
 			{/* Table */}
 			<div className="rounded-sm border">
-				<Table>
+				<Table className="table-fixed">
+					<colgroup>
+						<col className="w-[26%]" />
+						<col className="w-[44%]" />
+						<col className="w-[16%]" />
+						<col className="w-[14%]" />
+					</colgroup>
 					<TableHeader>
 						<TableRow>
 							<TableHead>Provider</TableHead>
@@ -123,26 +129,26 @@ export default function ModelCatalogTable({
 						) : (
 							rows.map((row) => (
 								<TableRow key={row.providerName}>
-									<TableCell>
+									<TableCell className="overflow-hidden">
 										<div className="flex items-center gap-2">
 											<RenderProviderIcon
 												provider={(row.isCustom ? row.baseProviderType : row.providerName) as ProviderIconType}
 												size="sm"
 												className="h-4 w-4 shrink-0"
 											/>
-											<span className="font-medium">
+											<span className="truncate font-medium">
 												{row.isCustom
 													? row.providerName
 													: ProviderLabels[row.providerName as keyof typeof ProviderLabels] || row.providerName}
 											</span>
 											{row.isCustom && (
-												<Badge variant="secondary" className="text-muted-foreground px-1.5 py-0.5 text-[10px] font-bold">
+												<Badge variant="secondary" className="text-muted-foreground shrink-0 px-1.5 py-0.5 text-[10px] font-bold">
 													CUSTOM
 												</Badge>
 											)}
 										</div>
 									</TableCell>
-									<TableCell>
+									<TableCell className="overflow-hidden">
 										{isLoadingModels ? (
 											<div className="flex items-center gap-1">
 												<Skeleton className="h-5 w-24 rounded-full" />
@@ -179,7 +185,7 @@ function ModelsUsedCell({ models: rawModels }: { models: string[] }) {
 		<TooltipProvider>
 			<div className="flex flex-wrap items-center gap-1">
 				{visible.map((m) => (
-					<Badge key={m} variant="outline" className="text-xs font-normal">
+					<Badge key={m} variant="outline" className="max-w-[220px] truncate text-xs font-normal">
 						{m}
 					</Badge>
 				))}
@@ -198,4 +204,4 @@ function ModelsUsedCell({ models: rawModels }: { models: string[] }) {
 			</div>
 		</TooltipProvider>
 	);
-}
+}