From 034d10dff929d76aabf7752b2f181dd48665e96e Mon Sep 17 00:00:00 2001
From: Marco <marco@bon.so>
Date: Sun, 30 Aug 2026 14:16:10 +0200
Subject: [PATCH 1/2] fix(wallet): make the connect menu readable over the hero

The wallet dropdown used .glass-panel (5% white fill plus a 12px backdrop
blur), so on mobile the hero headline and its glow showed straight through
the menu and the options were barely legible. Give the menu a solid popover
surface, a border that actually reads against the dark background, and a
drop shadow so its edge is visible.

Also label the list, label the testnet dev-key field, give the input a
visible boundary, and enlarge the item tap targets.

Claude-Session: https://claude.ai/code/session_01FjQPbxmvR37xGMKnSBr7wh
---
 components/wallet-connect-button.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/wallet-connect-button.tsx b/components/wallet-connect-button.tsx
index b3410e1..0381c5a 100644
--- a/components/wallet-connect-button.tsx
+++ b/components/wallet-connect-button.tsx
@@ -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>
@@ -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)}

From 80ff1e28519b1421322ae6848c5621905ff41f58 Mon Sep 17 00:00:00 2001
From: Marco <marco@bon.so>
Date: Sun, 30 Aug 2026 19:35:12 +0200
Subject: [PATCH 2/2] fix(ui): anchor dropdown menus to their trigger, not the
 page corner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base UI's Positioner defaults to positionMethod="absolute", which places the
popup with `position: absolute; left: 0; top: 0` plus a translate. An absolute
element resolves against the nearest transformed or filtered ancestor, so when
one sits between the portal root and the popup the translate is measured from
the wrong origin and the menu lands in the top-left corner of the page instead
of under its trigger — as the wallet Connect menu did.

Position against the viewport instead, which holds regardless of what the
surrounding page does to its stacking and containing blocks.

Claude-Session: https://claude.ai/code/session_01FjQPbxmvR37xGMKnSBr7wh
---
 components/ui/dropdown-menu.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index cdde606..b207458 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -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}