[Bug]: Trezor Wallet modal not displaying properly on mobile

[dweng0]

Current Behavior

When connecting to Trezor wallet on mobile, a modal pops up that is not legible:

Was able to reproduce this on the reactdemo

Expected Behavior

When selecting the trezor wallet.
The modal should fit screen.

Steps To Reproduce

while on mobile

1. Open React native demo
2. Click on Connect wallet
3. Select Trezor

What package is effected by this issue?

@web3-onboard/trezor

Is this a build or a runtime issue?

Runtime

Package Version

latest

Node Version

latest supported

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

Is there a possible workaround that could be implemented via CSS in the meantime?

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[dweng0]

Glancing at the CSS, it looks like the <Section> styling needs to allow for wrapping:

This will let the sections fall down on smaller screens.
There also needs to be a min-width & max-width on the "Select base path" select box:

and then some padding to tidy it up

[lnbc1QWFyb24]

Hey @dweng0, we have not optimised this UI for mobile yet as our understanding was that Trezor is not used/working on mobile. We would need to spend some time doing a mobile optimised version of this UI as it is currently a bit busy to fit on a mobile screen. Are your users asking for Trezor support on mobile?

cc @techgangboss @gesquinca

[dweng0]

Hey @aaronbarnardsound thank you for the update, we will disable it on mobile on our end then.

Cheers guys,
Jay

[dweng0]

One last one, there's no "filter" option on the Trezor method. So I can't explicitly ask it not to show on mobile. I think that should definitely be part of the options object if its not supported on mobile. That or it just knows not to load on mobile devices

[lnbc1QWFyb24]

@dweng0 Yeah good call, we'll need to add a way to not display on mobile devices.