Fix 2-factor QR code on small screens
Ensure the box stays at least wide enough to display the code, wrap the text content if needed
Related to #362278 (closed)
Issue from Slack
If the QR code is larger than 33% of the container width, it would previously overflow and be covered by the adjacent text box. This adds min-width: fit-content
to wrap the text box if needed. Also fix some padding / alignment of the box slightly so it looks nicer in dark mode
wide screen | narrower screen |
---|---|
![]() |
![]() |
How to test
- Go to Profile > Account > Add 2 factor
- In devtools, shrink the
.row
containing the QR code and text to a smaller width (500px or so). - Code should still be scannable
Edited by Hannah Sutor