Merge pull request #26280 from DanutGavrus/fix/24321-large-amounts-cu…

…t-off [24321] Large amounts are no longer cut off on smaller widths.
Expensify · Sep 11, 2023 · a4225a7 · a4225a7
2 parents 62f9a49 + bc0527f
commit a4225a7
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -32,7 +32,10 @@ import PressableWithFeedback from '../Pressable/PressableWithoutFeedback';
 import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
+import * as StyleUtils from '../../styles/StyleUtils';
 import colors from '../../styles/colors';
+import variables from '../../styles/variables';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView';
 
 const propTypes = {
@@ -135,9 +138,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 || '';
@@ -265,7 +271,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),
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {getDisplayAmountText()}
+                                    </Text>
                                     {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
                                         <View style={styles.defaultCheckmarkWrapper}>
                                             <Icon

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1187,6 +1187,35 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle | CSSPr
     };
 }
 
+/**
+ * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths.
+ */
+function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: number, isSmallScreenWidth: boolean, windowWidth: number): ViewStyle | CSSProperties {
+    let toSubtract = 0;
+
+    if (isSmallScreenWidth) {
+        const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth;
+        switch (true) {
+            case widthDifference > 450:
+                toSubtract = 11;
+                break;
+            case widthDifference > 400:
+                toSubtract = 8;
+                break;
+            case widthDifference > 350:
+                toSubtract = 4;
+                break;
+            default:
+                break;
+        }
+    }
+
+    return {
+        fontSize: baseFontSize - toSubtract,
+        lineHeight: baseLineHeight - toSubtract,
+    };
+}
+
 /**
  * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code
  */
@@ -1270,5 +1299,6 @@ export {
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
+    getAmountFontSizeAndLineHeight,
     getTransparentColor,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2700,6 +2700,12 @@ const styles = {
         marginBottom: 0,
     },
 
+    moneyRequestPreviewAmount: {
+        ...headlineFont,
+        ...whiteSpace.preWrap,
+        color: themeColors.heading,
+    },
+
     defaultCheckmarkWrapper: {
         marginLeft: 8,
         alignSelf: 'center',