fix: two factor modal alignment on tablet

[deepak0x]

Proposed changes

This update fixes the vertical alignment issue of the two-factor authentication modal on tablet devices.
Previously, the modal appeared closer to the top of the screen because the OS sometimes reported a smaller container height during split-screen or multitasking scenarios.

The fix ensures the modal remains properly centered on tablets while preserving existing behavior on phones.

Issue(s)

Closes #6839

How to test or reproduce

1. Open the app on a tablet device (e.g., iPad Pro or Pixel Tablet).
2. Go to login page and login
3. It will trigger the two-factor authentication modal.
4. Observe that:
   • Before: the modal appears near the top of the screen.
   • After: the modal is vertically centered.

On phones, verify that there is no visual change compared to previous behavior.

Screenshots

Tablet (Before / After)

Device	Before	After
iPad Pro
Pixel Tablet

Phone (No UI Change)

OS	Before	After
Android
iOS

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement
• New feature
• Documentation update

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests (not applicable for UI-only change)
• I have added necessary documentation (not applicable)
• Any dependent changes have been merged and published

[coderabbitai]

Walkthrough

Two-factor modal now reads device dimensions via react-native's useWindowDimensions and receives deviceHeight/deviceWidth props; container styles add alignItems: 'center'; Xcode project linker flag entries (OTHER_LDFLAGS) changed from a single string to a multi-value array in several build configurations.

Changes

Cohort / File(s)	Summary
Responsive dimensions handling app/containers/TwoFactor/index.tsx	Import useWindowDimensions, derive deviceHeight and deviceWidth, and pass them as props to the Modal component.
Container alignment app/containers/TwoFactor/styles.ts	Add alignItems: 'center' to the container style to center modal content horizontally.
iOS build settings (linker flags) ios/RocketChatRN.xcodeproj/project.pbxproj	Replace OTHER_LDFLAGS = "$(inherited) "; string entries with an array form OTHER_LDFLAGS = ("$(inherited)", " ",); in multiple Debug/Release XCBuildConfiguration blocks.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Files/areas needing extra attention:
  • ios/RocketChatRN.xcodeproj/project.pbxproj — ensure the multi-value OTHER_LDFLAGS change preserves expected linker behavior and doesn't introduce stray blank flags; verify Xcode/CI parsing.
  • app/containers/TwoFactor/index.tsx — confirm Modal consumes the passed deviceHeight/deviceWidth and that useWindowDimensions usage is correct (no server-side rendering concerns).
  • app/containers/TwoFactor/styles.ts — validate layout on phone and tablet form factors to avoid horizontal/vertical regressions.

Poem

🐰 I measured heights and widths with care,
I nudged the box to sit square in the air.
On tablets and phones the modal's aligned,
A hop, a fix — layout nicely refined. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	The changes to TwoFactor component, styles, and iOS build configuration are mostly in-scope, though the iOS .pbxproj changes appear unrelated to the modal centering fix and warrant clarification.	Clarify the purpose of the OTHER_LDFLAGS changes in the iOS build configuration file and confirm they are necessary for the modal centering fix.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #6839: passing live device dimensions to Modal, adding centered alignment styling for wider devices, and fixing vertical centering on tablets.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix: two factor modal alignment on tablet' directly and clearly describes the main change - fixing the two-factor authentication modal's alignment issue on tablet devices, which is the primary objective of the PR.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Rohit3523]

@deepak0x Could you please attach a screenshot of the app running on Android or iOS showing the 2FA modal?

[deepak0x]

sure....

[deepak0x]

here it Is..

[Rohit3523]

Can you please attach it in PR description

[deepak0x]

sure

[deepak0x]

I added it in pr description...

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

ios/RocketChatRN.xcodeproj/project.pbxproj (1)

3250-3253: Unrelated change: verify if this modification is intentional.

This OTHER_LDFLAGS format change (from string to array) appears unrelated to the TwoFactor modal centering fix. Additionally, the array includes a meaningless single-space element " " that serves no purpose for linker flags.

If this was an accidental change from Xcode reformatting the project file, consider reverting it to keep the PR focused on the modal fix. If intentional, the empty space element should be removed:

🔎 Suggested fix

 OTHER_LDFLAGS = (
     "$(inherited)",
-    " ",
 );

Also applies to: 3317-3320

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c6d92d4 and 7822385.

⛔ Files ignored due to path filters (1)

• ios/Podfile.lock is excluded by !**/*.lock

📒 Files selected for processing (2)

• app/containers/TwoFactor/index.tsx
• ios/RocketChatRN.xcodeproj/project.pbxproj

🚧 Files skipped from review as they are similar to previous changes (1)

• app/containers/TwoFactor/index.tsx

[Rohit3523]

I also noticed an extra width issue in the modal on mobile devices. When the props are removed, the modal width reverts to its normal size. I request that you verify this on a mobile device and update the PR description image accordingly.

[Rohit3523]

We have a dedicated pull request template, but this PR is not using it. Could you please update the PR description to use the following template?

Link for the PR template: https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/.github/PULL_REQUEST_TEMPLATE.md

[deepak0x]

I fixed it
and update the pr too...