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

• Pass 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

iPad Pro 11"

Before	After
Modal anchored near the top with a large empty area below.	Modal centered correctly within the backdrop.

Pixel Tablet

Before	After
Dialog positioned in the upper third of the screen.	Dialog centered with even spacing.

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]

Walkthrough

The two-factor authentication modal layout is updated to display responsive device dimensions and improved centering alignment properties. These changes address vertical misalignment issues on tablet and iPad devices by incorporating device-aware sizing and centered positioning styles.

Changes

Cohort / File(s)	Summary
Responsive dimensions handling app/containers/TwoFactor/index.tsx	Added useWindowDimensions hook to derive deviceHeight and deviceWidth values; these are passed as props to the Modal component for responsive behavior.
Modal centering and alignment app/containers/TwoFactor/styles.ts	Added alignItems: 'center' property to container style; introduced new exported modal style with margin: 0 and justifyContent: 'center' for vertical centering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Minor scope: only two files with straightforward styling and prop-passing changes
• No complex logic or control-flow modifications
• Direct alignment fix targeting responsive layout issue

Poem

🐰 A modal that danced on iPad's wide screen,
Now centered just right, a centering dream!
With dimensions so smart and alignment so true,
The tablet shall smile—fixed by our crew! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix TwoFactor modal centering on tablets' accurately and specifically describes the main change—resolving vertical alignment issues with the two-factor authentication modal on tablet devices.
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #6839: it passes device dimensions to the modal for responsive centering on tablets, adds centered alignment styling, and maintains phone behavior unchanged.
Out of Scope Changes check	✅ Passed	All changes are scoped to the TwoFactor modal component styling and dimension handling, directly addressing the tablet centering issue without introducing unrelated modifications.
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

---

📜 Recent review details

Configuration used: CodeRabbit 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 1bd62a2 and 853ade9.

📒 Files selected for processing (2)

• app/containers/TwoFactor/index.tsx (3 hunks)
• app/containers/TwoFactor/styles.ts (2 hunks)

🔇 Additional comments (5)

app/containers/TwoFactor/styles.ts (2)

9-9: LGTM! Horizontal centering added to container.

Adding alignItems: 'center' complements the existing justifyContent: 'center' to ensure the modal content is centered both vertically and horizontally within the flex container.

---

56-59: No action required—Modal styling follows react-native-modal's documented best practices.

The modal style with margin: 0 and justifyContent: 'center' is the standard approach for react-native-modal to create a full-screen wrapper and center content. This pattern is framework-standard and compatible across supported versions of the library.

app/containers/TwoFactor/index.tsx (3)

2-2: LGTM! Standard import addition.

The useWindowDimensions hook is correctly imported from react-native to provide live device dimensions.

---

69-69: LGTM! Live dimensions retrieved for responsive modal positioning.

Using useWindowDimensions() provides live device dimensions that update on orientation changes and multitasking scenarios, which is exactly what's needed to fix the tablet centering issue. Note that this will trigger re-renders when device dimensions change, which is expected and appropriate for this use case.

---

156-158: deviceHeight and deviceWidth props are valid for react-native-modal; ensure values update on layout/orientation changes.

The props are optional numeric properties that override the modal's measured screen size, useful for accounting for navigation bars or soft keyboards. They default to null and the component will measure the device otherwise. If passing these props, update them when layout or orientation changes occur—typically by using Dimensions.get('window') and listening to layout change events via Dimensions.addEventListener.

---

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