scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 35

fix(ui): truncate long team names in the models table team dropdown

Browse source 
The Team dropdown popup is pinned to the trigger width via
w-(--anchor-width) and clips its overflow, while Base UI's ItemText
wrapper is flex-1 shrink-0 with min-width: auto, so it sizes itself to
the full nowrap label and simply overflows the popup. Teams without a
team_alias render their 36-char id, so those options were sliced
mid-character with no ellipsis.

Clears min-width: auto off the text wrapper and truncates the label at
the call site. The underlying gap is in the shared Select primitive,
which any long-labelled select in the dashboard will hit; that is left
for a separate change.
This commit is contained in:
Yuneng Jiang 2026-07-25 22:56:37 -07:00
parent 215f05588d
commit 55ff0e10eb
No known key found for this signature in database
2 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx
View file

@ -358,6 +358,30 @@ describe("AllModelsTable", () => {
expect(onTeamChange).toHaveBeenCalledWith("team-1");
});
it("truncates long team options instead of clipping them at the popup edge", async () => {
const user = userEvent.setup();
const longLabel = "db29687d-0ca2-4bbe-a0f1-9c5f0f7c2a11";
render(
<AllModelsTable
{...baseProps}
teamOptions={[
{ value: "personal", label: "Personal" },
{ value: "team-long", label: longLabel },
]}
/>,
);
await user.click(screen.getByTestId("models-team-select"));
const option = await screen.findByRole("option", { name: longLabel });
const label = option.querySelector("[data-slot='select-item-label']");
expect(label).not.toBeNull();
expect(label).toHaveClass("truncate");
expect(label).toHaveAttribute("title", longLabel);
expect(option).toHaveClass("[&>div]:min-w-0");
});
it("runs the full reset from the filter drawer", async () => {
const user = userEvent.setup();
const onResetFilters = vi.fn();

11
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.tsx
View file

@ -224,8 +224,15 @@ export function AllModelsTable({
</SelectTrigger>
<SelectContent>
{teamOptions.map((option) => (
<SelectItem key={option.value} value={option.value} disabled={isLoadingTeams}>
{option.label}
<SelectItem
key={option.value}
value={option.value}
disabled={isLoadingTeams}
className="[&>div]:min-w-0"
>
<span data-slot="select-item-label" className="min-w-0 truncate" title={option.label}>
{option.label}
</span>
</SelectItem>
))}
</SelectContent>