Responsive design issue in first-time TFA enrollment flow

[mjabascal10]

Acknowledgements

• I have searched (https://github.com/utmstack/UTMStack/issues) for past instances of this issue
• I have verified that my UTMStack version is up-to-date

Describe the bug

When a user logs in for the first time and is prompted to enroll in Two-Factor Authentication (TFA), the responsive design does not adapt correctly to smaller or medium-height screens. The layout stretches vertically, occupying the full height and hiding critical action buttons.

Regression Issue

• Select this option if this issue appears to be a regression.

Expected Behavior

The TFA enrollment screen should adapt responsively to different screen sizes and heights. Buttons and actions should remain visible without requiring excessive scrolling, ensuring a smooth onboarding experience.

Current Behavior

The design appears too tall on certain screens, occupying the entire height and causing the action buttons to be hidden or partially inaccessible. This negatively impacts usability during the first-time login flow.

Reproduction Steps

1. Log in as a new user for the first time.
2. Trigger the TFA enrollment process.
3. Observe the layout on a medium-height or smaller screen.
4. Notice that the design stretches vertically and buttons are hidden.

Possible Solution

No response

Additional Information/Context

No response

UTMStack Version

11.1.4

Operating System and version

Ubuntu 22.04

Hypervisor and Version | Server Vendor and Model

Browser and version