From 2756695258f75607e05a03ac39b3bfd46a66b83f Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 30 Jul 2026 12:41:36 -0700 Subject: [PATCH 1/2] fix(ui): clamp table ID cells to the cell box instead of a fixed 15ch IdCell truncated with `block max-w-[15ch]`, a character-count clamp that ignores how much room the column actually has. On the budgets table the Budget ID column renders 509px wide at a 1400px container while the ID itself was pinned to 108px, so every UUID showed an ellipsis with roughly 400px of empty space beside it. The same held at 900px and 520px containers; the clamp never moved because it was never a function of the available width Switch to `inline-block max-w-full truncate`, the standard CSS idiom for shrink-to-fit text that ellipsizes at its container. IDs now render in full whenever the column has room and clip at the cell edge when it does not. `inline-block` keeps the pill variant sized to its content rather than stretching the blue background across the column, which a plain `block` would do once the character clamp is gone Measured in Chrome across 1400/900/520px containers and both variants: row height is unchanged, short IDs shrink from a padded 108px to 51px (plain) and 67px (pill), and the 36-char UUID renders fully at 260px --- .../src/components/shared/table_cells/id_cell.test.tsx | 10 +++++++++- .../src/components/shared/table_cells/id_cell.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx index 1a87f17d50b..41da4519018 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx @@ -28,10 +28,18 @@ describe("IdCell", () => { expect(el.tagName).toBe("SPAN"); expect(el.className).toContain("bg-blue-50"); expect(el.className).toContain("font-mono"); - expect(el.className).toContain("max-w-[15ch]"); + expect(el.className).toContain("max-w-full"); expect(el.className).toContain("truncate"); }); + it("clamps to the containing cell rather than a fixed character count", () => { + render(); + const el = screen.getByText("ecc1869c-6231-4380-a56d-1a0be457477d"); + expect(el.className).not.toMatch(/max-w-\[\d+(ch|rem|px)\]/); + expect(el.className).toContain("inline-block"); + expect(el.className).toContain("max-w-full"); + }); + it("renders plain mono text without pill styling for the plain variant", () => { render(); const el = screen.getByText("req-123"); diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx index 6fbd2e2f9ed..c8b75ee96e9 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx @@ -54,7 +54,7 @@ export function IdCell({ const classes = cn( VARIANT_CLASS[variant].base, clickable && VARIANT_CLASS[variant].clickable, - truncate && "block max-w-[15ch] truncate", + truncate && "inline-block max-w-full truncate", disabled && "opacity-50", className, ); From 7eee260ca84e5aa4b1f8281c8b905deb961b7c95 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 30 Jul 2026 14:04:13 -0700 Subject: [PATCH 2/2] fix(ui): stop clamping the budgets Budget ID column at 15 characters Reverts the shared IdCell change from the previous commit and scopes the fix to the budgets table instead IdCell truncates with `block max-w-[15ch]`, a character-count clamp with no relationship to the column's width. On budgets the Budget ID column renders 509px wide at a 1400px container while the ID stays pinned at 108px, so UUIDs ellipsize with ~400px of empty space beside them Changing that clamp in IdCell itself is wrong today because nothing else bounds the column. DataTable emits `width: px` on each cell but leaves the table in `table-auto`, where `width` is only a hint and `max-width` on a cell is ignored outright (measured: a 120px request yields a 938px column). Only `table-fixed` binds `size`, and DataTable enables it solely under `enableColumnResizing`, which 4 of 40 tables use. So an unbounded IdCell lets content drive the column: Request Logs would render a 64-char key hash in full, taking its key_hash column from 124px to 494px and pushing the table from 1918px to 2326px, introducing horizontal scroll at 1920 where there was none Scope it to the call site instead. `cn` is tailwind-merge backed, so a `max-w-*` passed via className dissolves the base clamp while leaving `truncate` in place; budget IDs render in full and still ellipsize at the cell edge if one ever outgrows the column. No other table moves This is a workaround. The real fix is to make column `size` authoritative by separating a fixed-layout option from `enableColumnResizing`, then dropping the per-cell clamps; 307 of 321 column defs already declare a size, so the mechanical gap is small, but ~20 tables would gain horizontal scroll at 1440 and that needs its own review --- .../budgets/_components/BudgetTable.test.tsx | 9 +++++++++ .../budgets/_components/BudgetTableColumns.tsx | 2 +- .../src/components/shared/table_cells/id_cell.test.tsx | 10 +--------- .../src/components/shared/table_cells/id_cell.tsx | 2 +- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTable.test.tsx index 9a7a7bd2eb9..2b97bcbc072 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTable.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTable.test.tsx @@ -35,6 +35,15 @@ describe("BudgetTable", () => { expect(screen.getByText("10")).toBeInTheDocument(); }); + it("should render the budget id without a fixed character-count clamp", () => { + const budgetId = "ecc1869c-6231-4380-a56d-1a0be457477d"; + renderWithProviders(); + const idCell = screen.getByText(budgetId); + expect(idCell.className).not.toMatch(/max-w-\[\d+(ch|rem|px)\]/); + expect(idCell.className).toContain("max-w-full"); + expect(idCell.className).toContain("truncate"); + }); + it("should show n/a for missing rate limits and Unlimited for a missing max budget", () => { renderWithProviders( , diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTableColumns.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTableColumns.tsx index 456ab9d6b68..e3fbc9dba08 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTableColumns.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/BudgetTableColumns.tsx @@ -75,7 +75,7 @@ export const getBudgetTableColumns = ({ header: "Budget ID", size: 220, enableSorting: false, - cell: ({ row }) => , + cell: ({ row }) => , }, { id: "max_budget", diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx index 41da4519018..1a87f17d50b 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.test.tsx @@ -28,18 +28,10 @@ describe("IdCell", () => { expect(el.tagName).toBe("SPAN"); expect(el.className).toContain("bg-blue-50"); expect(el.className).toContain("font-mono"); - expect(el.className).toContain("max-w-full"); + expect(el.className).toContain("max-w-[15ch]"); expect(el.className).toContain("truncate"); }); - it("clamps to the containing cell rather than a fixed character count", () => { - render(); - const el = screen.getByText("ecc1869c-6231-4380-a56d-1a0be457477d"); - expect(el.className).not.toMatch(/max-w-\[\d+(ch|rem|px)\]/); - expect(el.className).toContain("inline-block"); - expect(el.className).toContain("max-w-full"); - }); - it("renders plain mono text without pill styling for the plain variant", () => { render(); const el = screen.getByText("req-123"); diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx index c8b75ee96e9..6fbd2e2f9ed 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx @@ -54,7 +54,7 @@ export function IdCell({ const classes = cn( VARIANT_CLASS[variant].base, clickable && VARIANT_CLASS[variant].clickable, - truncate && "inline-block max-w-full truncate", + truncate && "block max-w-[15ch] truncate", disabled && "opacity-50", className, );