[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 || '';
@@ -253,7 +258,15 @@ 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.getAmountFontSizeAndLineHeight(variables.fontSizeXLarge, variables.lineHeightXXLarge, isSmallScreenWidth, windowWidth, requestAmount),
+                                    ]}
+                                    numberOfLines={1}
+                                >
+                                    {getDisplayAmountText()}
+                                </Text>
                                 {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
                                     <View style={styles.defaultCheckmarkWrapper}>
                                         <Icon

src/styles/StyleUtils.js

@@ -1329,6 +1329,35 @@ function getDropDownButtonHeight(buttonSize) {
     };
 }
 
+/**
+ * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths.
+ *
+ * @param {Number} baseFontSize
+ * @param {Number} baseLineHeight
+ * @param {Boolean} isSmallScreenWidth
+ * @param {Number} windowWidth
+ * @param {Number} requestAmount
+ * @returns {Object}
+ */
+function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth, requestAmount) {
+    let toSubtract = 0;
+
+    if (isSmallScreenWidth) {
+        const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth;
+        if (widthDifference > 350) toSubtract = 2;
+        if (widthDifference > 400) toSubtract = 6;
+        if (widthDifference > 450) toSubtract = 9;
+    }
+
+    // requestAmount also includes digits after ".", so "1,000,000.00" qualifies.
+    if (requestAmount >= 100000000) toSubtract += 2;
+
+    return {
+        fontSize: baseFontSize - toSubtract,
+        lineHeight: baseLineHeight - toSubtract,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1404,4 +1433,5 @@ export {
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
+    getAmountFontSizeAndLineHeight,
 };

src/styles/styles.js

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