Index: app/ui/account-filter-icon.tsx
===================================================================
--- app/ui/account-filter-icon.tsx	(revision efb6ea7601cafce9403e471fe0c1bbe357807bcc)
+++ app/ui/account-filter-icon.tsx	(revision 5332f771ad1c7cd30c339ee3774fb80292a87745)
@@ -1,5 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 import { WalletIcon, CheckIcon } from '@heroicons/react/24/outline';
@@ -23,5 +24,7 @@
     const { replace } = useRouter();
     const [open, setOpen] = useState(false);
+    const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});
     const ref = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
 
     const currentId = searchParams.get(accountParam) ?? '';
@@ -38,4 +41,24 @@
             return () => document.removeEventListener('mousedown', onClickOutside);
         }
+    }, [open]);
+
+    useLayoutEffect(() => {
+        if (!open || !buttonRef.current) {
+            return;
+        }
+
+        const rect = buttonRef.current.getBoundingClientRect();
+        const dropdownWidth = 224;
+        const gap = 8;
+        const left = Math.max(12, Math.min(rect.right - dropdownWidth, window.innerWidth - dropdownWidth - 12));
+        const top = rect.bottom + gap;
+
+        setMenuStyle({
+            position: 'fixed',
+            left,
+            top,
+            width: dropdownWidth,
+            zIndex: 9999,
+        });
     }, [open]);
 
@@ -61,6 +84,7 @@
 
     return (
-        <div ref={ref} className="relative">
+        <div ref={ref} className="relative z-50">
             <button
+                ref={buttonRef}
                 type="button"
                 onClick={() => setOpen((v) => !v)}
@@ -78,22 +102,25 @@
 
             {open && (
-                <div className="absolute right-0 top-14 z-50 w-56 rounded-xl bg-gray-900/95 border border-white/15 backdrop-blur-lg shadow-2xl py-1 overflow-hidden">
-                    <DropdownItem
-                        label="All Accounts"
-                        isSelected={currentId === ''}
-                        onClick={() => select('')}
-                    />
-                    {accounts.map((acc) => {
-                        const id = String(acc.transaction_account_id);
-                        return (
-                            <DropdownItem
-                                key={id}
-                                label={acc.account_name ?? `Account #${acc.transaction_account_id}`}
-                                isSelected={currentId === id}
-                                onClick={() => select(id)}
-                            />
-                        );
-                    })}
-                </div>
+                createPortal(
+                    <div style={menuStyle} className="rounded-xl bg-gray-900/95 border border-white/15 backdrop-blur-lg shadow-2xl py-1 overflow-hidden">
+                        <DropdownItem
+                            label="All Accounts"
+                            isSelected={currentId === ''}
+                            onClick={() => select('')}
+                        />
+                        {accounts.map((acc) => {
+                            const id = String(acc.transaction_account_id);
+                            return (
+                                <DropdownItem
+                                    key={id}
+                                    label={acc.account_name ?? `Account #${acc.transaction_account_id}`}
+                                    isSelected={currentId === id}
+                                    onClick={() => select(id)}
+                                />
+                            );
+                        })}
+                    </div>,
+                    document.body,
+                )
             )}
         </div>