From 882cbc4fb58c058415ad31d777894f12e1d6ac06 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 12 Dec 2024 17:20:37 +0100
Subject: [PATCH] feat(sdk/dappkit): fix styles in the dropdown (#4374)

* feat: fix styels

* feat: add scrollable content

* add item height
---
 .../src/components/AccountDropdownMenu.css.ts    |  9 ++++++++-
 .../src/components/AccountDropdownMenu.tsx       | 16 +++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts b/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts
index ef0b38e5e9f..54b2ca54071 100644
--- a/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts
+++ b/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts
@@ -18,7 +18,7 @@ export const menuContent = style({
     display: 'flex',
     flexDirection: 'column',
     width: 180,
-    maxHeight: 200,
+    maxHeight: 300,
     marginTop: 4,
     padding: 8,
     gap: 8,
@@ -26,8 +26,15 @@ export const menuContent = style({
     backgroundColor: themeVars.backgroundColors.dropdownMenu,
 });
 
+export const scrollableContent = style({
+    overflowY: 'auto',
+    maxHeight: 300,
+    flexGrow: 1,
+});
+
 export const menuItem = style({
     padding: 8,
+    height: 40,
     userSelect: 'none',
     outline: 'none',
     display: 'flex',
diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx b/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx
index cb602d9ebe1..9981b316814 100644
--- a/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx
+++ b/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx
@@ -41,13 +41,15 @@ export function AccountDropdownMenu({ currentAccount, size = 'lg' }: AccountDrop
             <DropdownMenu.Portal>
                 <StyleMarker className={styles.menuContainer}>
                     <DropdownMenu.Content className={styles.menuContent}>
-                        {accounts.map((account) => (
-                            <AccountDropdownMenuItem
-                                key={account.address}
-                                account={account}
-                                active={currentAccount.address === account.address}
-                            />
-                        ))}
+                        <div className={styles.scrollableContent}>
+                            {accounts.map((account) => (
+                                <AccountDropdownMenuItem
+                                    key={account.address}
+                                    account={account}
+                                    active={currentAccount.address === account.address}
+                                />
+                            ))}
+                        </div>
                         <DropdownMenu.Separator className={styles.separator} />
                         <DropdownMenu.Item
                             className={clsx(styles.menuItem)}