From 4194cd25d6d4d696ebc6263fa1bcd6f1a4dde364 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 8 Feb 2026 17:55:24 -0800
Subject: [PATCH] fix: Usage drop down should be scrollable (#364)

---
 packages/ui/src/components/layout/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 855d6fa5..408af80d 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -826,7 +826,7 @@ export const Header: React.FC = () => {
                 <p>Instance / Usage / MCP</p>
               </TooltipContent>
             </Tooltip>
-            <DropdownMenuContent align="end" className="w-[min(30rem,calc(100vw-2rem))] max-h-[75vh] overflow-hidden p-0">
+            <DropdownMenuContent align="end" className="w-[min(30rem,calc(100vw-2rem))] max-h-[75vh] overflow-y-auto p-0">
               <div className="sticky top-0 z-20 border-b border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-2">
                 <AnimatedTabs<'instance' | 'usage' | 'mcp'>
                   value={desktopServicesTab}
@@ -855,7 +855,7 @@ export const Header: React.FC = () => {
               )}
 
               {desktopServicesTab === 'usage' && (
-                <div className="max-h-[calc(75vh-3.25rem)] overflow-y-auto overflow-x-hidden">
+                <div className="overflow-x-hidden">
                   <div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
                     <DropdownMenuLabel className="flex items-center justify-between gap-3 py-2.5">
                       <div className="flex min-w-0 items-center gap-2">