Skip to content

fix(ui): make the wallet menu readable and anchor dropdowns to their trigger #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yeboster merged 2 commits into from
Aug 30, 2026
Merged

fix(ui): make the wallet menu readable and anchor dropdowns to their trigger #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
034d10d
fix(wallet): make the connect menu readable over the hero
yeboster Aug 30, 2026
80ff1e2
fix(ui): anchor dropdown menus to their trigger, not the page corner
yeboster Aug 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions components/ui/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ function DropdownMenuContent({
<MenuPrimitive.Portal>
<MenuPrimitive.Positioner
className="isolate z-50 outline-none"
// Base UI positions with `absolute` by default, which resolves against
// the nearest transformed/filtered ancestor. Any such ancestor between
// the portal root and the popup drops the menu into the page's top-left
// corner instead of under its trigger. `fixed` is measured against the
// viewport, so the anchoring holds whatever the page is doing.
positionMethod="fixed"
align={align}
alignOffset={alignOffset}
side={side}
Expand Down
22 changes: 15 additions & 7 deletions components/wallet-connect-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,11 @@ export function WalletConnectButton() {
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="glass-panel border-border/60"
className="border border-foreground/15 bg-popover shadow-xl shadow-black/60 ring-0 backdrop-blur-none"
>
<DropdownMenuItem
onClick={handleDisconnect}
className="gap-2 text-destructive"
className="gap-2 px-2.5 py-2 text-destructive"
>
<LogOut className="h-4 w-4" /> Disconnect
</DropdownMenuItem>
Expand All @@ -131,22 +131,30 @@ export function WalletConnectButton() {
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-64 glass-panel border-border/60"
className="w-64 border border-foreground/15 bg-popover shadow-xl shadow-black/60 ring-0 backdrop-blur-none"
>
<DropdownMenuItem onClick={handleMetaMask}>
<div className="px-2.5 py-1.5 text-xs font-medium text-muted-foreground">
Connect a wallet
</div>
<DropdownMenuItem className="px-2.5 py-2" onClick={handleMetaMask}>
MetaMask Wallet
</DropdownMenuItem>
<DropdownMenuItem onClick={handlePartisia}>
<DropdownMenuItem className="px-2.5 py-2" onClick={handlePartisia}>
Partisia Wallet
</DropdownMenuItem>
<DropdownMenuItem onClick={handleLedger}>Ledger</DropdownMenuItem>
<DropdownMenuItem className="px-2.5 py-2" onClick={handleLedger}>
Ledger
</DropdownMenuItem>
{mounted && config.isTestnet && (
<>
<DropdownMenuSeparator />
<div className="p-2 flex flex-col gap-2">
<span className="px-0.5 text-xs font-medium text-muted-foreground">
Testnet dev key
</span>
<Input
data-testid="dev-key-input"
className="dev-key-input text-xs"
className="dev-key-input border-border bg-background text-xs placeholder:text-muted-foreground"
placeholder="64-char hex private key"
value={devKey}
onChange={(e) => setDevKey(e.target.value)}
Expand Down
Loading