Use radix css var to limit desktop menu height

blakeblackshear · Aug 4, 2024 · 1eeecda · 1eeecda
1 parent 88d4b69
commit 1eeecda
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
@@ -139,8 +139,18 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
           </Tooltip>
         </Trigger>
         <Content
+          style={
+            isDesktop
+              ? {
+                  maxHeight:
+                    "var(--radix-dropdown-menu-content-available-height)",
+                }
+              : {}
+          }
           className={
-            isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
+            isDesktop
+              ? "scrollbar-container mr-5 w-72 overflow-y-auto"
+              : "max-h-[75dvh] overflow-hidden p-2"
           }
         >
           <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">