The page should be locked to Portrait mode regardless of the device orientation, so users know this page is meant to be used in portrait mode. Actually, the payment informations, who can be read, edited or deleted, are hidden on small/medium mobile devices when its orientation is landscape, once that the footer is sticked and is displaied in front of it.
We had two options to try to achieve this goal:
-
Actually lock screen orientation (Javascript) Via Javascript, get the screen orientation and call the lock() api.
-
Stylize screen on landscape mode as portrait mode (CSS) With CSS, rotate the page on -90 degree, so the style that we have for portait will be applied to an rotated device.
PR-46056 contains more information about the code who lead to this results.
Some devices or browsers, like chrome, don't allow this change due to user preference; so this solution won't solve our problem.
if (screen.orientation && screen.orientation.lock) {
this.lockOrientation()
} else {
console.warn("Debug: Screen orientation lock is not supported by this browser.");
}
Here’s a refined version of your explanation that makes it clearer for both developers and the product owner:
To ensure a consistent portrait experience, even when the device is in landscape mode, we are applying:
- Using CSS rotation
transform: rotate(-90deg), we will be able to make the landscape mode looks like portrait mode. Besides, we will need some effort to adjust: to centering for different devices - Adjustments for different screen sizes to ensure proper centering across devices.
- Sticky footer behavior to keep it anchored at the bottom, even after rotation.
- Rotating modals and flyouts so they remain aligned with the transformed layout instead of following the default unrotated behavior. Without these adjustments, UI elements like modals and side menus would appear misaligned, impacting usability.
