Fix TwoFactor modal centering on tablets

[deepak0x]

Fix: Two-Factor Modal Alignment on Tablet Layouts

Closes #6839

This update fixes the vertical alignment of the two-factor authentication modal on tablets.
Previously, the modal appeared near the top of the screen because the OS sometimes reported a smaller container height during split screen or multitasking.

---

🛠️ Changes

• Passed live device dimensions into react-native-modal to allow correct centering.
• Added a modal wrapper style with centered alignment on wider devices.
• No UI changes on phones.

---

✅ Testing

• Ran yarn lint
• Manually tested on:
  • iPad Pro 11"
  • Pixel Tablet

---

📸 Before and After (Tablet)

Device	Before	After
iPad Pro
Pixel Tablet

---

📱 Additional Screenshots (Phone – No UI Change)

Android

iOS

---

Summary by CodeRabbit

• Style
  • Enhanced Two-Factor authentication modal with improved responsiveness and better center alignment across different device sizes.

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

[coderabbitai[bot]]

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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing the centering of the TwoFactor modal on tablets.
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.

✨ 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...