changed MFA styles to directly use (not compose) responsive styles
changedc-step-panels to not assume responsive layout
Testing
Open MFA pairing (or unpairing) view.
Make message appear (e.g. click button to generate QR code).
On wide screen (992px or wider), layout should be "good". (click for details)
1. Verify panels are **horizontal**.
1. Verify message is **outside** first panel.
1. Verify message is **centered** (line between panels is at center of message).
1. Verify message can **not** exceed width of container.
To do so, live-edit message text to be long enough to wrap.
1. Verify **all** content can be seen when scrolling _vertically_.
To do so, make window so short that scrollbar appears.
On narrow screen (991px or narrower), layout should be "good". (click for details)
1. Verify panels are **vertical**.
1. Verify message is **within** first panel.
1. Verify message is **left-aligned**.
1. Verify message can **not** exceed width of container.
To do so, live-edit message text to be long enough to wrap.
1. Verify **all** content can be seen when scrolling _vertically_.
To do so, make window so short that scrollbar appears.
If you notice the horizontal scrollbar, then know that it is fixed in #315.
UI
Wide
normal
long message*
vertical scroll
Narrow
normal*
long message*
vertical scroll*
* About the <TextFieldCopy> stretch…
_The `` will try to stretch to fill available space._
To avoid (subjectively) worst case scenario, wide-screen sets `width: max-content` on `.mfa-message` to prevent that, assuming normal-length message text, but with caveats:
1. A long message text stretches the message, thus giving `` opportunity to stretch on wide screen.
2. `` is allowed to stretch on a narrow screen, because were a narrow screen to use `width: max-content` on `.mfa-message`, long message text would stretch to fill entire width of screen (which just looked weird to me).
If this solution looks weird to anyone else, tell me and we can let designers decide what they want, which might change the challenge for the better.
_Another solution may be to change `` to **not** stretch. (That change can be performed independent of this PR.)_
wesleyboar
commented
1 year ago
Overview
Repair MFA responsive layout CSS so that narrow-screen layout is used.
Related
Changes
c-step-panelsto not assume responsive layoutTesting
On wide screen (992px or wider), layout should be "good".
1. Verify panels are **horizontal**. 1. Verify message is **outside** first panel. 1. Verify message is **centered** (line between panels is at center of message). 1. Verify message can **not** exceed width of container. To do so, live-edit message text to be long enough to wrap. 1. Verify **all** content can be seen when scrolling _vertically_. To do so, make window so short that scrollbar appears.(click for details)
On narrow screen (991px or narrower), layout should be "good".
1. Verify panels are **vertical**. 1. Verify message is **within** first panel. 1. Verify message is **left-aligned**. 1. Verify message can **not** exceed width of container. To do so, live-edit message text to be long enough to wrap. 1. Verify **all** content can be seen when scrolling _vertically_. To do so, make window so short that scrollbar appears.(click for details)
If you notice the horizontal scrollbar, then know that it is fixed in #315.
UI
Wide
Narrow
* About the
_The `<TextFieldCopy>stretch…