Update DropdownMenu styling (#3787)

Author: zenoachtig

.changeset/early-cobras-raise.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Update dropdown menu styling

packages/gitbook/src/components/primitives/DropdownMenu.tsx

@@ -24,6 +24,11 @@ const DropdownMenuContext = createContext<{
     setOpen: () => {},
 });
 
+const DROPDOWN_CONTENT_OUTER_CLASS =
+    'z-50 flex max-h-(--radix-dropdown-menu-content-available-height) min-w-28 xs:min-w-40 max-w-(--radix-dropdown-menu-content-available-width) origin-top animate-scale-in flex-col pt-2 data-[state=closed]:animate-scale-out';
+const DROPDOWN_CONTENT_INNER_CLASS =
+    'flex flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg';
+
 /**
  * Button with a dropdown.
  */
@@ -82,14 +87,9 @@ export function DropdownMenu(props: {
                         onMouseLeave={() => setHovered(false)}
                         align={align}
                         side={side}
-                        className="z-50 animate-scale-in border-tint pt-2"
+                        className={DROPDOWN_CONTENT_OUTER_CLASS}
                     >
-                        <div
-                            className={tcls(
-                                'flex max-h-[30rem] min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
-                                className
-                            )}
-                        >
+                        <div className={tcls(DROPDOWN_CONTENT_INNER_CLASS, className)}>
                             {children}
                         </div>
                     </RadixDropdownMenu.Content>
@@ -162,7 +162,7 @@ export function DropdownMenuItem(
     } = props;
 
     const itemClassName = tcls(
-        'rounded-xs straight-corners:rounded-xs circular-corners:rounded-lg px-3 py-1 text-sm flex gap-2 items-center',
+        'rounded-sm straight-corners:rounded-none circular-corners:rounded-lg px-3 py-1 text-sm flex gap-2 items-center',
         active
             ? 'bg-primary text-primary-strong data-highlighted:bg-primary-hover'
             : 'data-highlighted:bg-tint-hover',
@@ -214,11 +214,9 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
                 <RadixDropdownMenu.SubContent
                     hideWhenDetached
                     collisionPadding={8}
-                    className="z-50 animate-present"
+                    className={DROPDOWN_CONTENT_OUTER_CLASS}
                 >
-                    <div className="flex max-h-96 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80">
-                        {children}
-                    </div>
+                    <div className={DROPDOWN_CONTENT_INNER_CLASS}>{children}</div>
                 </RadixDropdownMenu.SubContent>
             </RadixDropdownMenu.Portal>
         </RadixDropdownMenu.Sub>