fix(ui): move Virtual Keys create button back to the left

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx

@@ -162,7 +162,7 @@ export function VirtualKeysTable({ headerActions }: VirtualKeysTableProps) {
         icon={<KeyRound className="size-5" />}
         title="Virtual Keys"
         subtitle="Every key that authenticates requests to the gateway."
-        actions={headerActions}
+        leadingActions={headerActions}
       />
       <DataTable
         data={keyList}

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

@@ -23,6 +23,26 @@ describe("PageHeader", () => {
     expect(screen.getByRole("button", { name: "Create New Key" })).toBeInTheDocument();
   });
 
+  it("renders leadingActions in the same row as the title, before the trailing actions", () => {
+    render(
+      <PageHeader
+        title="Virtual Keys"
+        leadingActions={<button>Create New Key</button>}
+        actions={<button>Refresh</button>}
+      />,
+    );
+
+    const heading = screen.getByRole("heading", { name: "Virtual Keys" });
+    const leading = screen.getByRole("button", { name: "Create New Key" });
+    const trailing = screen.getByRole("button", { name: "Refresh" });
+
+    const titleGroup = heading.parentElement?.parentElement;
+    expect(titleGroup).not.toBeNull();
+    expect(titleGroup?.contains(leading)).toBe(true);
+    expect(titleGroup?.contains(trailing)).toBe(false);
+    expect(leading.compareDocumentPosition(trailing) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it("omits the optional slots when not provided", () => {
     render(<PageHeader title="Virtual Keys" />);
     expect(screen.queryByRole("button")).not.toBeInTheDocument();

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

@@ -7,9 +7,10 @@ interface PageHeaderProps {
   subtitle?: React.ReactNode;
   icon?: React.ReactNode;
   actions?: React.ReactNode;
+  leadingActions?: React.ReactNode;
 }
 
-export function PageHeader({ title, subtitle, icon, actions }: PageHeaderProps) {
+export function PageHeader({ title, subtitle, icon, actions, leadingActions }: PageHeaderProps) {
   return (
     <div className="flex flex-wrap items-start justify-between gap-4">
       <div className="flex items-center gap-2.5">
@@ -18,6 +19,7 @@ export function PageHeader({ title, subtitle, icon, actions }: PageHeaderProps)
           <h1 className="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
           {subtitle != null && <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>}
         </div>
+        {leadingActions != null && <div className="flex items-center gap-2">{leadingActions}</div>}
       </div>
       {actions != null && <div className="flex items-center gap-2">{actions}</div>}
     </div>