From efbbb4a9a72bd4a0e15167c26ab1d29a259f0103 Mon Sep 17 00:00:00 2001
From: KenEzekiel <kenneth.ezekiel.suprantoni@xendit.co>
Date: Thu, 17 Sep 2026 08:21:02 +0700
Subject: [PATCH] fix(ui): sidebar footer overlap, scroll containment, usage
 card default state

- SidebarFooter: add z-10 + bg-sidebar so scrolling nav items don't
  bleed through the footer visually
- ScrollArea (leftnav): add overflow-hidden to properly clip the scroll
  container across browsers
- SidebarUsageCard: start collapsed (defaultOpen={false}) so the footer
  doesn't crush the nav scroll area on short/laptop viewports
---
 ui/litellm-dashboard/src/components/SidebarUsageCard.tsx | 2 +-
 ui/litellm-dashboard/src/components/leftnav.tsx          | 2 +-
 ui/litellm-dashboard/src/components/shared/Sidebar.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/SidebarUsageCard.tsx b/ui/litellm-dashboard/src/components/SidebarUsageCard.tsx
index effb6c29e8e..9f185ff4868 100644
--- a/ui/litellm-dashboard/src/components/SidebarUsageCard.tsx
+++ b/ui/litellm-dashboard/src/components/SidebarUsageCard.tsx
@@ -96,7 +96,7 @@ export default function SidebarUsageCard({ accessToken, collapsed, onExpandRail
   const meters = buildMeters(data);
 
   return (
-    <Collapsible defaultOpen className="overflow-hidden rounded-xl border border-sidebar-border bg-sidebar">
+    <Collapsible defaultOpen={false} className="overflow-hidden rounded-xl border border-sidebar-border bg-sidebar">
       <CollapsibleTrigger className="group/usage flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-sidebar-accent">
         <span className="flex size-[26px] flex-none items-center justify-center rounded-md bg-sidebar-primary/10 text-sidebar-primary">
           <Award className="size-4" strokeWidth={1.75} />
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 9d772f45153..aebb620362d 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -637,7 +637,7 @@ const Sidebar_: React.FC<SidebarProps> = ({
         </div>
       </SidebarHeader>
 
-      <ScrollArea className="min-h-0 flex-1">
+      <ScrollArea className="min-h-0 flex-1 overflow-hidden">
         <nav className="flex flex-col gap-0.5 px-3 pb-3">
           {visibleGroups.map((group, gi) => (
             <SidebarGroup key={group.groupLabel}>
diff --git a/ui/litellm-dashboard/src/components/shared/Sidebar.tsx b/ui/litellm-dashboard/src/components/shared/Sidebar.tsx
index 06e19d1b674..261b03e6ea5 100644
--- a/ui/litellm-dashboard/src/components/shared/Sidebar.tsx
+++ b/ui/litellm-dashboard/src/components/shared/Sidebar.tsx
@@ -64,7 +64,7 @@ const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWitho
     <div
       ref={ref}
       data-slot="sidebar-footer"
-      className={cn("flex flex-none flex-col gap-2.5 border-t border-sidebar-border p-3", className)}
+      className={cn("relative z-10 flex flex-none flex-col gap-2.5 border-t border-sidebar-border bg-sidebar p-3", className)}
       {...props}
     />
   ),