MFA setup on mobile devices with lower resolutions is impossible to complete

[rezalas]

Server Info (please complete the following information):

• OS: Debian 12.13
• Browser: Chrome
• RMM Version (as shown in top left of web UI): 1.4.0

Installation Method:

• [ X ] Standard

Agent Info (please complete the following information):

• Agent version (as shown in the 'Summary' tab of the agent from web UI): N/A
• Agent OS: N/A

Describe the bug
As a user with a new account, viewing the Add MFA page on a mobile device with a small screen (phone) is difficult or impossible. The page does not resize or allow for scrolling, so you have to fight the UI to get the code or set up your account security.

To Reproduce
Steps to reproduce the behavior:

1. Add a new account that requires MFA.
2. Open login page on you mobile phone (Moto g 5g 2023 used)
3. Attempt to view the MFA setup page
4. The page will not allow scrolling, and the text will be squished into a small column in the center. The QR code will be partially or entirely below the line, and the finish button and manual setup code will not be visible.

Evaluation Methods on PC:
Set browser in developer tool mode for various mobile dimensions, including iPhone SE, iPhone 12 Pro, Galaxy S8+, Galaxy Z Fold 5, etc.

Resolutions below 924 x 743 see defects like the code spilling over the q-card or partial/total obscuring of critical data.

Expected behavior
The page should adjust accordingly so that users can set up a new account while using a phone. On smaller screens, setting something like the following will resolve the issue:

@media (max-width: 900px) {
   .col {
      flex-basis: 100%;
   }
}

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.