feat(sdk/dappkit): fix styles in the dropdown (#4374)

* feat: fix styels * feat: add scrollable content * add item height
iotaledger · Dec 12, 2024 · 882cbc4 · 882cbc4
1 parent 2b73ad7
commit 882cbc4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts b/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts
@@ -18,16 +18,23 @@ export const menuContent = style({
     display: 'flex',
     flexDirection: 'column',
     width: 180,
-    maxHeight: 200,
+    maxHeight: 300,
     marginTop: 4,
     padding: 8,
     gap: 8,
     borderRadius: themeVars.radii.large,
     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
@@ -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)}