Network list items are hidden on smaller viewports

[usame-algan]

Description

With 12 available networks, the list is becoming too long with its current implementation.

This already leads to a bug for smaller screens:

When accessing the app with a smaller viewport height the network items are not fully visible and some items can't be reached.

Ideas:

• scrollable network selector
• add a search field for supported networks
• show a few default most used networks
• save list of networks the user has accessed before

Goal

Enable the user to easily choose any network from a list of more than 20 networks.

Requirements

• [ ] design https://github.com/gnosis/safe-design/issues/40
• [ ] tbd

Expected result

Screenshots

[katspaugh]

cc @liliiaorlenko – it would be nice to also maybe hide the testnets (Rinkeby, Goerli and Volta) under a sub list.

Actually backend wants us to paginate this list, so maybe the best solution would be to add pagination/search.

Pin recently used networks to the top, maybe.

[katspaugh]

Fixed in web-core by having smaller margins.