Skip to content

fix: restrict max width of 2FA dialog on tablet screens#6945

Open
prithvisingh01-tech wants to merge 1 commit intoRocketChat:developfrom
prithvisingh01-tech:fix-tablet-alignment
Open

fix: restrict max width of 2FA dialog on tablet screens#6945
prithvisingh01-tech wants to merge 1 commit intoRocketChat:developfrom
prithvisingh01-tech:fix-tablet-alignment

Conversation

@prithvisingh01-tech
Copy link

@prithvisingh01-tech prithvisingh01-tech commented Jan 26, 2026 •
edited by coderabbitai bot
Loading

Description

Fixed an issue where the Two-Factor Authentication dialog would stretch to 100% width on tablet screens, causing a misalignment.

Changes

  • Added maxWidth: 480 to the content container in styles.ts.
  • Added alignSelf: 'center' to ensure the dialog stays centered on larger viewports.

How to test

  1. Open the app on a Tablet emulator.
  2. Navigate to the 2FA screen.
  3. Verify that the input box is no longer full-width.

Summary by CodeRabbit

  • Style
    • Enhanced the layout of the two-factor authentication component on larger screens with improved centering and optimized width constraints for better visual presentation on tablets and desktop devices.

✏️ Tip: You can customize this high-level summary in your review settings.

@CLAassistant
Copy link

CLAassistant commented Jan 26, 2026

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 26, 2026 •
edited
Loading

Walkthrough

A styling enhancement to the TwoFactor component that adds a maximum width constraint of 480px and center alignment to the content container, while maintaining its responsive 100% width property for flexible layout behavior.

Changes

Cohort / File(s) Summary
TwoFactor styling
app/containers/TwoFactor/styles.ts		 Adds maxWidth: 480 and alignSelf: 'center' to content styles, constraining component width on larger screens and centering the layout

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A centered tale in eighty pixels wide,
The Two-Factor stands with measured pride,
No longer stretching to the edges far,
It rests just right, a perfect star! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: restricting the max width of the 2FA dialog on tablet screens, which directly matches the modifications to the styles file.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@prithvisingh01-tech @CLAassistant