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] 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 && (