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: <size>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

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(<BudgetTable {...defaultProps} budgets={[makeBudget({ budget_id: budgetId })]} />);
+    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(
       <BudgetTable {...defaultProps} budgets={[makeBudget({ max_budget: null, tpm_limit: null, rpm_limit: null })]} />,

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 }) => <IdCell value={row.original.budget_id} variant="plain" />,
+    cell: ({ row }) => <IdCell value={row.original.budget_id} variant="plain" className="max-w-full" />,
   },
   {
     id: "max_budget",

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(<IdCell value="ecc1869c-6231-4380-a56d-1a0be457477d" />);
-    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(<IdCell value="req-123" variant="plain" />);
     const el = screen.getByText("req-123");

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,
   );