From 014754be947e60cbefa1a3ecaae0a68a05a7443f Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Fri, 26 Jun 2026 18:34:07 -0700
Subject: [PATCH] fix(ui): let dashboard main pane shrink so wide tables scroll
 instead of overflowing

The Request Logs page pushed the whole page past the viewport horizontally. The cause was the app shell flex layout: <main className="flex-1"> is a flex item, and flex items default to min-width: auto, so they refuse to shrink below their content's intrinsic width. The logs table is intrinsically ~2300px across its 16 nowrap columns, so main grew to that width and dragged the page with it; the table's own overflow-x-auto wrapper never got the chance to scroll

Add min-w-0 to main so it can shrink to the available width, at which point the existing overflow-x-auto wrapper engages and the table scrolls inside its card. This applies to every dashboard page, not just logs

Also drop the dead max-w-screen class on the logs container (not a real Tailwind utility, so it was a no-op), and revert the earlier column-sizing attempt which targeted table-layout rather than the actual containment problem
---
 .../src/app/(dashboard)/layout.tsx            |  2 +-
 .../src/components/view_logs/columns.tsx      | 16 -------
 .../src/components/view_logs/index.tsx        |  2 +-
 .../src/components/view_logs/table.test.tsx   | 44 -------------------
 .../src/components/view_logs/table.tsx        | 15 +------
 5 files changed, 4 insertions(+), 75 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/components/view_logs/table.test.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index a5e83436888..09951dc1923 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -126,7 +126,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
             <div className="mt-2">
               <SidebarProvider setPage={navigateToPage} defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} />
             </div>
-            <main className="flex-1">{children}</main>
+            <main className="flex-1 min-w-0">{children}</main>
           </>
         )}
       </div>
diff --git a/ui/litellm-dashboard/src/components/view_logs/columns.tsx b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
index aeeb31f78f3..1265b8449de 100644
--- a/ui/litellm-dashboard/src/components/view_logs/columns.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
@@ -119,13 +119,11 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "Time",
     accessorKey: "startTime",
-    size: 200,
     cell: (info: any) => <TimeCell utcTime={info.getValue()} />,
   },
   {
     header: "Type",
     id: "type",
-    size: 90,
     cell: (info: any) => {
       const row = info.row.original;
       const sessionCount = row.session_total_count || 1;
@@ -170,7 +168,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Status",
     accessorKey: "metadata.status",
-    size: 100,
     cell: (info: any) => {
       const status = info.getValue() || "Success";
       const isSuccess = status.toLowerCase() !== "failure";
@@ -189,7 +186,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Session ID",
     accessorKey: "session_id",
-    size: 160,
     cell: (info: any) => {
       const value = String(info.getValue() || "");
       const onSessionClick = info.row.original.onSessionClick;
@@ -211,7 +207,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Request ID",
     accessorKey: "request_id",
-    size: 160,
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "")}>
         <span className="font-mono text-xs max-w-[15ch] truncate block">{String(info.getValue() || "")}</span>
@@ -231,7 +226,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "Cost",
     accessorKey: "spend",
-    size: 110,
     cell: (info: any) => {
       const row = info.row.original;
       const mcpCount = row.mcp_tool_call_count || 0;
@@ -264,7 +258,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "Duration (s)",
     accessorKey: "request_duration_ms",
-    size: 120,
     cell: (info: any) => {
       const ms = info.getValue();
       if (ms == null) return <span>-</span>;
@@ -289,7 +282,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "TTFT (s)",
     accessorKey: "completionStartTime",
-    size: 110,
     cell: (info: any) => {
       const row = info.row.original;
       const completionStartTime = info.getValue();
@@ -309,7 +301,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Team Name",
     accessorKey: "metadata.user_api_key_team_alias",
-    size: 150,
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "-")}>
         <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
@@ -319,7 +310,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Key Hash",
     accessorKey: "metadata.user_api_key",
-    size: 160,
     cell: (info: any) => {
       const value = String(info.getValue() || "-");
       const onKeyHashClick = info.row.original.onKeyHashClick;
@@ -339,7 +329,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Key Alias",
     accessorKey: "metadata.user_api_key_alias",
-    size: 150,
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "-")}>
         <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
@@ -359,7 +348,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "Model",
     accessorKey: "model",
-    size: 200,
     cell: (info: any) => {
       const row = info.row.original;
       const provider = row.custom_llm_provider;
@@ -397,7 +385,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
         )
       : "Tokens",
     accessorKey: "total_tokens",
-    size: 140,
     cell: (info: any) => {
       const row = info.row.original;
       return (
@@ -413,7 +400,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Internal User",
     accessorKey: "user",
-    size: 150,
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "-")}>
         <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
@@ -423,7 +409,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "End User",
     accessorKey: "end_user",
-    size: 140,
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "-")}>
         <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
@@ -434,7 +419,6 @@ export const createColumns = (sortProps?: LogsSortProps): ColumnDef<LogEntry>[]
   {
     header: "Tags",
     accessorKey: "request_tags",
-    size: 150,
     cell: (info: any) => {
       const tags = info.getValue();
       if (!tags || Object.keys(tags).length === 0) return "-";
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index 6c5fd03f0a0..cfe1bd6025a 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -234,7 +234,7 @@ export default function SpendLogsTable({ accessToken, token, userRole, userID, p
   };
 
   return (
-    <div className="w-full max-w-screen p-6 overflow-x-hidden box-border">
+    <div className="w-full p-6 overflow-x-hidden box-border">
       <TabGroup defaultIndex={0} onIndexChange={(index) => setActiveTab(index === 0 ? "request logs" : "audit logs")}>
         <TabList>
           <Tab>Request Logs</Tab>
diff --git a/ui/litellm-dashboard/src/components/view_logs/table.test.tsx b/ui/litellm-dashboard/src/components/view_logs/table.test.tsx
deleted file mode 100644
index f88e9bd75c8..00000000000
--- a/ui/litellm-dashboard/src/components/view_logs/table.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ColumnDef } from "@tanstack/react-table";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { DataTable } from "./table";
-
-type Row = { request_id: string; a: string; b: string };
-
-const data: Row[] = [{ request_id: "r1", a: "alpha", b: "beta" }];
-
-const sizedColumns: ColumnDef<Row>[] = [
-  { header: "A", accessorKey: "a", size: 120 },
-  { header: "B", accessorKey: "b", size: 80 },
-];
-
-const unsizedColumns: ColumnDef<Row>[] = [
-  { header: "A", accessorKey: "a" },
-  { header: "B", accessorKey: "b" },
-];
-
-describe("DataTable column sizing", () => {
-  it("widths the table and every cell from column sizes when columns declare them", () => {
-    render(<DataTable data={data} columns={sizedColumns} />);
-
-    expect(screen.getByRole("table").style.width).toBe("200px");
-
-    const headers = screen.getAllByRole("columnheader");
-    expect(headers.map((h) => h.style.width)).toEqual(["120px", "80px"]);
-
-    const cells = screen.getAllByRole("cell");
-    expect(cells.map((c) => c.style.width)).toEqual(["120px", "80px"]);
-  });
-
-  it("leaves cells unsized and keeps the fluid table when no column declares a size", () => {
-    render(<DataTable data={data} columns={unsizedColumns} />);
-
-    const table = screen.getByRole("table");
-    expect(table.style.width).toBe("");
-    expect(table.style.minWidth).toBe("400px");
-
-    for (const cell of [...screen.getAllByRole("columnheader"), ...screen.getAllByRole("cell")]) {
-      expect(cell.style.width).toBe("");
-    }
-  });
-});
diff --git a/ui/litellm-dashboard/src/components/view_logs/table.tsx b/ui/litellm-dashboard/src/components/view_logs/table.tsx
index a47bf5a8e5c..6aa349513d5 100644
--- a/ui/litellm-dashboard/src/components/view_logs/table.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/table.tsx
@@ -41,7 +41,6 @@ export function DataTable<TData, TValue>({
   enableSorting = false,
 }: DataTableProps<TData, TValue>) {
   const supportsExpansion = !!(renderSubComponent || renderChildRows) && !!getRowCanExpand;
-  const hasExplicitColumnSizes = columns.some((column) => column.size !== undefined);
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const table = useReactTable<TData>({
@@ -64,14 +63,9 @@ export function DataTable<TData, TValue>({
     ...(supportsExpansion && { getExpandedRowModel: getExpandedRowModel() }),
   });
 
-  const tableClassName = hasExplicitColumnSizes
-    ? "[&_td]:py-0.5 [&_th]:py-1 [&_table]:table-fixed"
-    : "[&_td]:py-0.5 [&_th]:py-1 table-fixed w-full box-border";
-  const tableStyle = hasExplicitColumnSizes ? { width: table.getCenterTotalSize() } : { minWidth: "400px" };
-
   return (
     <div className="rounded-lg custom-border overflow-x-auto w-full max-w-full box-border">
-      <Table className={tableClassName} style={tableStyle}>
+      <Table className="[&_td]:py-0.5 [&_th]:py-1 table-fixed w-full box-border" style={{ minWidth: "400px" }}>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
@@ -83,7 +77,6 @@ export function DataTable<TData, TValue>({
                   <TableHeaderCell
                     key={header.id}
                     className={`py-1 h-8 ${canSort ? "cursor-pointer select-none hover:bg-gray-50" : ""}`}
-                    style={hasExplicitColumnSizes ? { width: header.getSize() } : undefined}
                     onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
                   >
                     {header.isPlaceholder ? null : (
@@ -119,11 +112,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"
-                      style={hasExplicitColumnSizes ? { width: cell.column.getSize() } : undefined}
-                    >
+                    <TableCell key={cell.id} className="py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap">
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}