Fix: Regression - Big number pad button size is not justified on small screens

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;

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,