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

1. Go to Profile > Account > Add 2 factor
2. In devtools, shrink the .row containing the QR code and text to a smaller width (500px or so).
3. Code should still be scannable