fix: dropdown scrollbar

packages/web_common/package.json

@@ -44,6 +44,7 @@
 		"vite-plugin-static-copy": "^3.0.0"
 	},
 	"dependencies": {
-		"@untitled-theme/icons-react": "^0.14.0"
+		"@untitled-theme/icons-react": "^0.14.0",
+		"overlayscrollbars-react": "^0.5.6"
 	}
 }

packages/web_common/src/components/Dropdown.tsx

@@ -6,6 +6,7 @@ import type {
 import type { VariantProps } from 'tailwind-variants';
 import type { ClassNameString } from '../types/global';
 import { ChevronDownIcon, ChevronUpIcon } from '@untitled-theme/icons-react';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import React from 'react';
 import {
 	Label as AriaLabel,
@@ -41,11 +42,14 @@ const dropdownStyles = tv({
 			'bg-component-bg border border-component-border',
 			'data-[entering]:animate-in data-[entering]:fade-in data-[entering]:zoom-in-95',
 			'data-[exiting]:animate-out data-[exiting]:fade-out data-[exiting]:zoom-out-95',
+			'react-aria-Popover',
 		],
 
 		popoverContentWrapper: 'flex flex-col gap-1',
 
-		listBox: 'max-h-46 overflow-auto outline-none flex flex-col gap-0.5',
+		listBox: 'outline-none flex flex-col gap-0.5',
+
+		overlayScrollbars: 'max-h-46 overflow-auto',
 
 		listToolRowWrapper: 'p-1 mt-1',
 	},
@@ -134,11 +138,13 @@ export function Dropdown<TValue extends object>(props: DropdownProps<TValue>) {
 						}
 					</Button>
 
-					<AriaPopover className={twMerge(styles.popover(), popoverClassName, 'react-aria-Popover')}>
+					<AriaPopover className={twMerge(styles.popover(), popoverClassName)}>
 						<div className={styles.popoverContentWrapper()}>
-							<AriaListBox className={styles.listBox()}>
-								{children}
-							</AriaListBox>
+							<OverlayScrollbarsComponent className={styles.overlayScrollbars()}>
+								<AriaListBox className={styles.listBox()}>
+									{children}
+								</AriaListBox>
+							</OverlayScrollbarsComponent>
 							{listToolRow && (
 								<div className={styles.listToolRowWrapper()}>
 									{listToolRow}

pnpm-lock.yaml

@@ -365,6 +365,9 @@ importers:
       motion:
         specifier: ^12.10.5
         version: 12.10.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      overlayscrollbars-react:
+        specifier: ^0.5.6
+        version: 0.5.6(overlayscrollbars@2.11.2)(react@19.1.0)
       react:
         specifier: ^19.0.0
         version: 19.1.0