fix(ui): make the wallet menu readable and anchor dropdowns to their trigger - #2
Merged
Conversation
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
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two UI fixes that were sitting unmerged on
dev/sdk-v7after PR #1 went in, cherry-picked onto currentmain..glass-panel— a 5% white fill over a 12px backdrop blur — so on mobile the hero headline and its glow read straight through the menu. It now gets a solid popover surface, a border that stands out against the dark background, and a drop shadow so the edge is visible. The connect menu also gains a "Connect a wallet" label and roomier items.Verification
tsc --noEmitclean, 769 unit tests pass,next buildgreen.https://claude.ai/code/session_01GceWCwGXu66D1xEBDxZWBb