From d657423d4f27df1ccb9e976e8e5bcadf6bf60f35 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@berri.ai>
Date: Tue, 14 Jul 2026 01:21:18 +0000
Subject: [PATCH] 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>
---
 .../VirtualKeysPage/VirtualKeysTable.tsx      |  2 +-
 .../src/components/shared/PageHeader.test.tsx | 20 +++++++++++++++++++
 .../src/components/shared/PageHeader.tsx      |  4 +++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx
index 112b6cbcba4..68ab1ed8ee3 100644
--- a/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx
+++ b/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}
diff --git a/ui/litellm-dashboard/src/components/shared/PageHeader.test.tsx b/ui/litellm-dashboard/src/components/shared/PageHeader.test.tsx
index f7a313271da..5ca40c380ec 100644
--- a/ui/litellm-dashboard/src/components/shared/PageHeader.test.tsx
+++ b/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();
diff --git a/ui/litellm-dashboard/src/components/shared/PageHeader.tsx b/ui/litellm-dashboard/src/components/shared/PageHeader.tsx
index e314e8e8bc2..89ba77f78af 100644
--- a/ui/litellm-dashboard/src/components/shared/PageHeader.tsx
+++ b/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>