Merge pull request #26747 from tienifr/fix/regression-24603

Fix: Regression - Big number pad button size is not justified on small screens
Expensify · Sep 18, 2023 · 9c8ea24 · 9c8ea24
2 parents a4fa0d4 + 32153c9
commit 9c8ea24
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/hooks/useWindowDimensions/index.js b/src/hooks/useWindowDimensions/index.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
-import {useWindowDimensions} from 'react-native';
+import {Dimensions, useWindowDimensions} from 'react-native';
 import variables from '../../styles/variables';
 
 /**
@@ -8,7 +8,9 @@ import variables from '../../styles/variables';
  */
 export default function () {
     const {width: windowWidth, height: windowHeight} = useWindowDimensions();
-    const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
+    // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight.
+    const screenHeight = Dimensions.get('screen').height;
+    const isExtraSmallScreenHeight = screenHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -74,7 +74,7 @@ export default {
     emojiLineHeight: 28,
     iouAmountTextSize: 40,
     extraSmallMobileResponsiveWidthBreakpoint: 320,
-    extraSmallMobileResponsiveHeightBreakpoint: 550,
+    extraSmallMobileResponsiveHeightBreakpoint: 667,
     mobileResponsiveWidthBreakpoint: 800,
     modalFullscreenBackdropOpacity: 0.5,
     tabletResponsiveWidthBreakpoint: 1024,