From 4cb466a8dc77f75d2be5ba17304f8319852ebbc8 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 22 Aug 2026 16:34:16 -0700
Subject: [PATCH 1/2] feat(ui): add the theme toggle to the public model hub
 navbar

The model hub table already renders correctly in dark mode: every one of
its files went onto semantic tokens in the earlier palette migration. What
was missing is a way to get there. The navbar hid the whole account block
behind `!isPublicPage`, and the theme toggle lived inside that block, so
`/ui/model_hub_table` had no control at all and anyone landing on it was
stuck in light.

Split the block so the toggle always renders and only the notifications
bell and account menu stay gated on being signed in.
---
 .../src/components/navbar.test.tsx            |  7 ++++++
 .../src/components/navbar.tsx                 | 22 ++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.test.tsx b/ui/litellm-dashboard/src/components/navbar.test.tsx
index e33ec404916..bac9bfc7159 100644
--- a/ui/litellm-dashboard/src/components/navbar.test.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.test.tsx
@@ -272,6 +272,13 @@ describe("Navbar", () => {
     expect(screen.queryByRole("button", { name: /^notifications$/i })).not.toBeInTheDocument();
   });
 
+  it("should keep the theme toggle on public pages", () => {
+    const publicPageProps = { ...defaultProps, isPublicPage: true };
+    renderWithProviders(<Navbar {...publicPageProps} />);
+
+    expect(screen.getByRole("button", { name: /^theme$/i })).toBeInTheDocument();
+  });
+
   it("should handle hide new feature indicators toggle", async () => {
     const user = userEvent.setup();
 
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 0cd3a0d44e5..bcf84cf7ab3 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -162,17 +162,19 @@ const Navbar: React.FC<NavbarProps> = ({
               </div>
             )}
 
-            {!isPublicPage && (
-              <div className="flex shrink-0 items-center border-l border-border pl-4">
-                <div className="flex items-center gap-0.5 rounded-lg bg-muted px-1 py-0 transition-colors hover:bg-accent">
-                  <ThemeToggle />
-                  <span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
-                  <NotificationsBell />
-                  <span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
-                  <UserDropdown onLogout={handleLogout} />
-                </div>
+            <div className="flex shrink-0 items-center border-l border-border pl-4">
+              <div className="flex items-center gap-0.5 rounded-lg bg-muted px-1 py-0 transition-colors hover:bg-accent">
+                <ThemeToggle />
+                {!isPublicPage && (
+                  <>
+                    <span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
+                    <NotificationsBell />
+                    <span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
+                    <UserDropdown onLogout={handleLogout} />
+                  </>
+                )}
               </div>
-            )}
+            </div>
           </div>
         </div>
       </div>

From 89d7679afd347b8e4e3544688bc0008dd886759d Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 22 Aug 2026 22:26:30 -0700
Subject: [PATCH 2/2] fix(ui): tighten the navbar control group on narrow
 viewports

---
 ui/litellm-dashboard/src/components/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index bcf84cf7ab3..c279a275ad4 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -132,7 +132,7 @@ const Navbar: React.FC<NavbarProps> = ({
             </div>
           )}
 
-          <div className="ml-auto flex min-w-0 flex-1 items-center justify-end gap-4">
+          <div className="ml-auto flex min-w-0 flex-1 items-center justify-end gap-4 max-sm:gap-2">
             {showWorkerSwitch && (
               <div className="flex shrink-0 items-center">
                 <WorkerDropdown onWorkerSwitch={handleWorkerSwitch} />
@@ -162,7 +162,7 @@ const Navbar: React.FC<NavbarProps> = ({
               </div>
             )}
 
-            <div className="flex shrink-0 items-center border-l border-border pl-4">
+            <div className="flex shrink-0 items-center border-l border-border pl-4 max-sm:border-l-0 max-sm:pl-2">
               <div className="flex items-center gap-0.5 rounded-lg bg-muted px-1 py-0 transition-colors hover:bg-accent">
                 <ThemeToggle />
                 {!isPublicPage && (