Merge pull request #34684 from BerriAI/litellm_/model-table-divider-center-b75b6d

fix(ui): center vertical toolbar dividers

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

@@ -200,6 +200,15 @@ describe("AllModelsTable", () => {
     expect(screen.getByText("+2 more")).toBeInTheDocument();
   });
 
+  it("renders the toolbar divider centered rather than stretched to the top of the row", () => {
+    const { container } = render(<AllModelsTable {...baseProps} />);
+
+    const separators = container.querySelectorAll('[data-slot="separator"][data-orientation="vertical"]');
+    expect(separators).toHaveLength(1);
+    expect(separators[0].className).not.toMatch(/self-stretch/);
+    expect(separators[0].className).toContain("data-vertical:self-center");
+  });
+
   describe("pause / resume", () => {
     it("renders the toggle on for an active DB model and off for a blocked one", () => {
       const { rerender } = render(<AllModelsTable {...baseProps} />);

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

@@ -14,7 +14,7 @@ import {
 import { SearchSelect } from "@/components/shared/SearchSelect";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+import { ToolbarSeparator } from "@/components/shared/ToolbarSeparator";
 import { cn } from "@/lib/cva.config";
 
 import {
@@ -242,7 +242,7 @@ export function AllModelsTable({
               </SelectContent>
             </Select>
 
-            <Separator orientation="vertical" className="mx-0.5 h-5" />
+            <ToolbarSeparator className="mx-0.5" />
 
             <Button
               variant="outline"

ui/litellm-dashboard/src/components/DashboardHeader.test.tsx

@@ -54,4 +54,13 @@ describe("DashboardHeader breadcrumb", () => {
     expect(screen.getByText("Logs")).toBeInTheDocument();
     expect(screen.queryByText("Observability")).not.toBeInTheDocument();
   });
+
+  it("renders the tools divider centered rather than stretched to the top of the row", () => {
+    const { container } = render(<DashboardHeader page="logs" />);
+
+    const separators = container.querySelectorAll('[data-slot="separator"][data-orientation="vertical"]');
+    expect(separators).toHaveLength(1);
+    expect(separators[0].className).not.toMatch(/self-stretch/);
+    expect(separators[0].className).toContain("data-vertical:self-center");
+  });
 });

ui/litellm-dashboard/src/components/DashboardHeader.tsx

@@ -8,7 +8,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { Separator } from "@/components/ui/separator";
+import { ToolbarSeparator } from "@/components/shared/ToolbarSeparator";
 import { getBreadcrumb } from "@/components/leftnav";
 import { BlogDropdown } from "@/components/Navbar/BlogDropdown/BlogDropdown";
 import { CommunityEngagementButtons } from "@/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons";
@@ -58,7 +58,7 @@ export function DashboardHeader({ page }: DashboardHeaderProps) {
         {showWorkerSwitch && (
           <>
             <WorkerDropdown onWorkerSwitch={handleWorkerSwitch} />
-            <Separator orientation="vertical" className="mx-1.5 h-5" />
+            <ToolbarSeparator />
           </>
         )}
         <Button
@@ -72,7 +72,7 @@ export function DashboardHeader({ page }: DashboardHeaderProps) {
         </Button>
         <BlogDropdown />
         {!hideCommunityLinks && <CommunityEngagementButtons />}
-        <Separator orientation="vertical" className="mx-1.5 h-5" />
+        <ToolbarSeparator />
         <NotificationsBell />
       </div>
     </header>

ui/litellm-dashboard/src/components/shared/ToolbarSeparator.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { ToolbarSeparator } from "./ToolbarSeparator";
+
+function renderSeparator(className?: string): HTMLElement {
+  const { container } = render(<ToolbarSeparator className={className} />);
+  const separator = container.querySelector('[data-slot="separator"]');
+  if (!(separator instanceof HTMLElement)) {
+    throw new Error("ToolbarSeparator did not render a separator element");
+  }
+  return separator;
+}
+
+describe("ToolbarSeparator", () => {
+  it("drops the primitive's self-stretch so a fixed-height divider stays vertically centered", () => {
+    const separator = renderSeparator();
+
+    expect(separator.className).not.toMatch(/self-stretch/);
+    expect(separator.className).toContain("data-vertical:self-center");
+  });
+
+  it("stays vertical and keeps its fixed height", () => {
+    const separator = renderSeparator();
+
+    expect(separator).toHaveAttribute("data-orientation", "vertical");
+    expect(separator.className).toContain("h-5");
+  });
+
+  it("lets callers override spacing without resurrecting self-stretch", () => {
+    const separator = renderSeparator("mx-0.5");
+
+    expect(separator.className).toContain("mx-0.5");
+    expect(separator.className).not.toMatch(/mx-1\.5/);
+    expect(separator.className).not.toMatch(/self-stretch/);
+  });
+});

ui/litellm-dashboard/src/components/shared/ToolbarSeparator.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/cva.config";
+
+interface ToolbarSeparatorProps {
+  className?: string;
+}
+
+export function ToolbarSeparator({ className }: ToolbarSeparatorProps) {
+  return <Separator orientation="vertical" className={cn("mx-1.5 h-5 data-vertical:self-center", className)} />;
+}