From 4037bb12c3aabf24304bb8550a5d4e692a47179a Mon Sep 17 00:00:00 2001
From: Szedann <65607498+Szedann@users.noreply.github.com>
Date: Fri, 4 Jul 2025 17:43:01 +0200
Subject: [PATCH] fix: dropdown scrollbar

---
 packages/web_common/package.json                |  3 ++-
 packages/web_common/src/components/Dropdown.tsx | 16 +++++++++++-----
 pnpm-lock.yaml                                  |  3 +++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/web_common/package.json b/packages/web_common/package.json
index 71f47e8a..0a99a4aa 100644
--- a/packages/web_common/package.json
+++ b/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"
 	}
 }
diff --git a/packages/web_common/src/components/Dropdown.tsx b/packages/web_common/src/components/Dropdown.tsx
index 2cda471c..c5f22ef5 100644
--- a/packages/web_common/src/components/Dropdown.tsx
+++ b/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}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 617807eb..d1bca725 100644
--- a/pnpm-lock.yaml
+++ b/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