From 3edfe665086fc0a53630569cf4150ff7ca5ea9d2 Mon Sep 17 00:00:00 2001 From: Juan Cardona Date: Wed, 19 Jul 2023 18:29:59 -0500 Subject: [PATCH 1/5] #20709: Add windowHeight to height and min-height property --- src/libs/Navigation/AppNavigator/AuthScreens.js | 2 +- src/styles/styles.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 90a9358feff3..b6a817cfb3fc 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -210,7 +210,7 @@ class AuthScreens extends React.Component { ...commonScreenOptions, // we want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', - cardStyle: styles.navigationModalCard(this.props.isSmallScreenWidth), + cardStyle: styles.navigationModalCard(this.props.isSmallScreenWidth, window.innerHeight), }; return ( diff --git a/src/styles/styles.js b/src/styles/styles.js index 30dda5c21ede..c10f6629a246 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1763,13 +1763,14 @@ const styles = { marginRight: 4, }, - navigationModalCard: (isSmallScreenWidth) => ({ + navigationModalCard: (isSmallScreenWidth, windowHeight) => ({ position: 'absolute', top: 0, right: 0, width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, backgroundColor: 'transparent', - height: '100%', + height: windowHeight, + minHeight: windowHeight, }), navigationModalOverlay: { From aa20626e5b7028437f66f4cdc45e50cbd929a057 Mon Sep 17 00:00:00 2001 From: Juan Cardona Date: Thu, 20 Jul 2023 07:19:04 -0500 Subject: [PATCH 2/5] 20709: Start using again getNavigationModalCardStyle --- src/libs/Navigation/AppNavigator/AuthScreens.js | 6 +++++- .../getNavigationModalCardStyles/index.website.js | 1 + src/styles/styles.js | 10 ---------- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index b6a817cfb3fc..d76a6be4b42b 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -33,6 +33,7 @@ import NAVIGATORS from '../../../NAVIGATORS'; import FullScreenNavigator from './Navigators/FullScreenNavigator'; import styles from '../../../styles/styles'; import * as SessionUtils from '../../SessionUtils'; +import getNavigationModalCardStyle from '../../../styles/getNavigationModalCardStyles'; let currentUserEmail; Onyx.connect({ @@ -210,7 +211,10 @@ class AuthScreens extends React.Component { ...commonScreenOptions, // we want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', - cardStyle: styles.navigationModalCard(this.props.isSmallScreenWidth, window.innerHeight), + cardStyle: getNavigationModalCardStyle({ + windowHeight: this.props.windowHeight, + isSmallScreenWidth: this.props.isSmallScreenWidth, + }), }; return ( diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index 8f76cf8d17d5..9e233fa5b9ee 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -8,4 +8,5 @@ export default ({windowHeight, isSmallScreenWidth}) => ({ // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824 height: `${windowHeight}px`, + minHeight: `${windowHeight}px`, }); diff --git a/src/styles/styles.js b/src/styles/styles.js index c10f6629a246..4ec0348a60fc 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1763,16 +1763,6 @@ const styles = { marginRight: 4, }, - navigationModalCard: (isSmallScreenWidth, windowHeight) => ({ - position: 'absolute', - top: 0, - right: 0, - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, - backgroundColor: 'transparent', - height: windowHeight, - minHeight: windowHeight, - }), - navigationModalOverlay: { ...userSelect.userSelectNone, position: 'absolute', From 112b61b132219d6eb0d90edcfd66d39074da184e Mon Sep 17 00:00:00 2001 From: Juan Sebastian Cardona Date: Thu, 20 Jul 2023 11:09:05 -0500 Subject: [PATCH 3/5] Add issue related url comment --- src/styles/getNavigationModalCardStyles/index.website.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index 9e233fa5b9ee..eb4f7171832b 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -7,6 +7,8 @@ export default ({windowHeight, isSmallScreenWidth}) => ({ // Safari issues: // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824 + // https://github.com/Expensify/App/issues/20709 + height: `${windowHeight}px`, minHeight: `${windowHeight}px`, }); From f72741f3d5ac05e75ff97b248841a3ee4ebef440 Mon Sep 17 00:00:00 2001 From: Juan Cardona Date: Thu, 20 Jul 2023 13:01:20 -0500 Subject: [PATCH 4/5] Add index.js to getNavigationModalCardStyles --- src/styles/getNavigationModalCardStyles/index.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/styles/getNavigationModalCardStyles/index.js diff --git a/src/styles/getNavigationModalCardStyles/index.js b/src/styles/getNavigationModalCardStyles/index.js new file mode 100644 index 000000000000..cbfa04a19fe2 --- /dev/null +++ b/src/styles/getNavigationModalCardStyles/index.js @@ -0,0 +1,3 @@ +import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; + +export default getBaseNavigationModalCardStyles; From df683c3a5df2a0808086ce9ae28769e560fb3fb1 Mon Sep 17 00:00:00 2001 From: Juan Cardona Date: Thu, 20 Jul 2023 14:13:31 -0500 Subject: [PATCH 5/5] Run prettier --- src/styles/getNavigationModalCardStyles/index.website.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index eb4f7171832b..c975d29301fb 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -8,7 +8,7 @@ export default ({windowHeight, isSmallScreenWidth}) => ({ // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824 // https://github.com/Expensify/App/issues/20709 - + height: `${windowHeight}px`, minHeight: `${windowHeight}px`, });