Find wallet > remove all the scrolls > quick fix

[nloureiro]

The find wallet page was designed to have a specific behavior that evolved to add some scroll in some areas of the page.
we got some feedback that was making the experience worse, and we wanted to test without the scroll.

This PR is trying to test and probably implement a simpler experience on this page.

Preview link

https://ethereumorgwebsitedev01-findwalletremovescroling.gatsbyjs.io/en/wallets/find-wallet

Related Issue

#11156

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 39m build time

[wackerow]

Awesome! I definitely think this feels better...

I suppose my main concern is if we should make anything sticky... such as potentially the left filter menus, or more importantly the top filter bar.

I think I care most about the top filter bar since if you lose that, the green checks mean nothing. Those column headers are dynamic so without those, you really have no idea what the checks/x's mean.

[pettinarip]

Good improvement!

Agreed with @wackerow, would be a good addition to have the filters and table header as sticky to keep improving the ux. I think you mentioned this on the original issue and that could come in next iterations.

=====

Two things I see while testing:

1. In mobile, the filter's sidebar doesn't work very well when scrolling too much
   https://github.com/ethereum/ethereum-org-website/assets/468158/b79bfaec-439e-42e4-ac5c-7a7e3b9871b4

2. Can we remove the bottom 1px line that separate the table's content from the footer? made sense before since we had that inner scrolling but now it feels unnecessary and we end having 2 close bottom lines
   

[wackerow]

Added some changes... to summarize:

• Removed some of the logic from the WalletFilterSidebar that was handling mobile vs desktop styling (made it more "dumb")
• Implemented a Chakra-UI Drawer component to handle the entire mobile display for the WalletFilterSidebar component, including open/close logic (implemented with useDisclosure Chakra-UI hook), animation, and handling of the backdrop, focus trapping, and pointer events.
• Removed the boxShadow being used as a backdrop
• Removed all pointerEvents overrides from these components (the Drawer should handle everything that we needed these for)

[wackerow]

Just tried this out, feeling much more polished! Got all the sticky positioning cleaned up. Approved from my end.

[corwintines]

Screen.Recording.2023-10-01.at.8.13.44.PM.mov

Added a line for full width back in to avoid this resizing bug on desktop

[pettinarip]

Looks great!

Wondering if we consider the following as a bug:

issue.mp4

I'd expect the content of the sidebar to be sticky as well.

Approving it for now.