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

src/components/BigNumberPad.js

@@ -6,6 +6,7 @@ import styles from '../styles/styles';
 import Button from './Button';
 import ControlSelection from '../libs/ControlSelection';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const propTypes = {
     /** Callback to inform parent modal with key pressed */
@@ -34,6 +35,7 @@ const padNumbers = [
 
 function BigNumberPad(props) {
     const [timer, setTimer] = useState(null);
+    const {isExtraSmallScreenHeight} = useWindowDimensions();
 
     /**
      * Handle long press key on number pad.
@@ -71,6 +73,7 @@ function BigNumberPad(props) {
                         return (
                             <Button
                                 key={column}
+                                medium={isExtraSmallScreenHeight}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
                                 text={column === '<' ? column : props.toLocaleDigit(column)}

src/hooks/useWindowDimensions.js

@@ -8,12 +8,14 @@ import variables from '../styles/variables';
  */
 export default function () {
     const {width: windowWidth, height: windowHeight} = useWindowDimensions();
+    const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
     return {
         windowWidth,
         windowHeight,
+        isExtraSmallScreenHeight,
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,

src/pages/iou/steps/MoneyRequestAmountForm.js

@@ -13,6 +13,7 @@ import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurren
 import useLocalize from '../../../hooks/useLocalize';
 import CONST from '../../../CONST';
 import refPropTypes from '../../../components/refPropTypes';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
 
 const propTypes = {
     /** IOU amount saved in Onyx */
@@ -59,6 +60,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCurrencyButtonPress, onSubmitButtonPress}) {
+    const {isExtraSmallScreenHeight} = useWindowDimensions();
     const {translate, toLocaleDigit, numberFormat} = useLocalize();
 
     const textInput = useRef(null);
@@ -221,6 +223,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
                 ) : null}
                 <Button
                     success
+                    medium={isExtraSmallScreenHeight}
                     style={[styles.w100, styles.mt5]}
                     onPress={submitAndNavigateToNextPage}
                     pressOnEnter

src/styles/variables.ts

@@ -74,6 +74,7 @@ export default {
     emojiLineHeight: 28,
     iouAmountTextSize: 40,
     extraSmallMobileResponsiveWidthBreakpoint: 320,
+    extraSmallMobileResponsiveHeightBreakpoint: 550,
     mobileResponsiveWidthBreakpoint: 800,
     modalFullscreenBackdropOpacity: 0.5,
     tabletResponsiveWidthBreakpoint: 1024,