Pass props.windowHeight to getBaseNavigationModalCardStyles

...to work around Safari CSS issues.
Expensify · May 26, 2023 · b3454c0 · b3454c0
1 parent 0070968
commit b3454c0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -157,7 +157,7 @@ class AuthScreens extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
-        return nextProps.isSmallScreenWidth !== this.props.isSmallScreenWidth;
+        return nextProps.windowHeight !== this.props.windowHeight || nextProps.isSmallScreenWidth !== this.props.isSmallScreenWidth;
     }
 
     componentWillUnmount() {
@@ -184,7 +184,10 @@ class AuthScreens extends React.Component {
         };
         const modalScreenOptions = {
             ...commonModalScreenOptions,
-            cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
+            cardStyle: getNavigationModalCardStyle({
+                windowHeight: this.props.windowHeight,
+                isSmallScreenWidth: this.props.isSmallScreenWidth,
+            }),
             cardStyleInterpolator: (props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props),
             cardOverlayEnabled: true,
 

diff --git a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
@@ -1,6 +1,6 @@
 import variables from '../variables';
 
-export default (isSmallScreenWidth) => ({
+export default ({isSmallScreenWidth}) => ({
     position: 'absolute',
     top: 0,
     right: 0,

diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js
@@ -1,9 +1,11 @@
 import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles';
 
-export default (isSmallScreenWidth) => ({
-    ...getBaseNavigationModalCardStyles(isSmallScreenWidth),
+export default ({windowHeight, isSmallScreenWidth}) => ({
+    ...getBaseNavigationModalCardStyles({isSmallScreenWidth}),
 
-    // This makes the modal card take up the full height of the screen on Desktop Safari and iOS Safari
-    // https://github.com/Expensify/App/pull/12509/files#r1018107162
-    height: 'calc(100vh - 100%)',
+    // This height is passed from JavaScript, instead of using CSS expressions like "100%" or "100vh", to work around
+    // Safari issues:
+    // https://github.com/Expensify/App/issues/12005
+    // https://github.com/Expensify/App/issues/17824
+    height: `${windowHeight}px`,
 });