[24321] Large amounts are no longer cut off on smaller widths.

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -34,6 +34,8 @@ import PressableWithFeedback from '../Pressable/PressableWithoutFeedback';
 import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
+import variables from '../../styles/variables';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -131,9 +133,12 @@ const defaultProps = {
 };
 
 function MoneyRequestPreview(props) {
+    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
         return null;
     }
+
     const sessionAccountID = lodashGet(props.session, 'accountID', null);
     const managerID = props.iouReport.managerID || '';
     const ownerAccountID = props.iouReport.ownerAccountID || '';
@@ -159,6 +164,22 @@ function MoneyRequestPreview(props) {
         description = props.transaction.merchant;
     }
 
+    // Prevents large amounts from being cut off on small screen widths.
+    const getFontSizeAndLineHeightToSubtract = () => {
+        let toSubtract = 0;
+        if (isSmallScreenWidth) {
+            const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth;
+            if (widthDifference > 450) toSubtract = 9;
+            else if (widthDifference > 400) toSubtract = 6;
+            else if (widthDifference > 350) toSubtract = 2;
+        }
+
+        // requestAmount also includes digits after ".", so "1,000,000.00" qualifies.
+        if (requestAmount >= 100000000) toSubtract += 2;
+
+        return toSubtract;
+    };
+
     const getSettledMessage = () => {
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
             case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:
@@ -253,7 +274,16 @@ function MoneyRequestPreview(props) {
                         </View>
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
+                                <Text
+                                    style={[
+                                        styles.moneyRequestPreviewAmount,
+                                        StyleUtils.getFontSizeStyle(variables.fontSizeXLarge - getFontSizeAndLineHeightToSubtract()),
+                                        StyleUtils.getLineHeightStyle(variables.lineHeightXXLarge - getFontSizeAndLineHeightToSubtract()),
+                                    ]}
+                                    maxNumberOfLines={3}
+                                >
+                                    {getDisplayAmountText()}
+                                </Text>
                                 {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
                                     <View style={styles.defaultCheckmarkWrapper}>
                                         <Icon

src/styles/styles.js

@@ -2681,6 +2681,12 @@ const styles = {
         marginBottom: 0,
     },
 
+    moneyRequestPreviewAmount: {
+        ...headlineFont,
+        ...whiteSpace.preWrap,
+        color: themeColors.heading,
+    },
+
     defaultCheckmarkWrapper: {
         marginLeft: 8,
         alignSelf: 'center',