From d7ab4c49c2ba9bcf1118eae4fb80e2a515d7931c Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 17 Oct 2023 10:56:42 +0100
Subject: [PATCH] Fix native text styles, add width to container to handle
 overflow

---
 src/components/EReceipt.js | 2 +-
 src/styles/styles.ts       | 4 ----
 src/styles/variables.ts    | 1 +
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js
index e6b3a9809c7e..84daabb96c9b 100644
--- a/src/components/EReceipt.js
+++ b/src/components/EReceipt.js
@@ -59,7 +59,7 @@ function EReceipt({transaction, transactionID}) {
             </View>
             <View style={[styles.flexColumn, styles.justifyContentBetween, styles.alignItemsCenter, styles.ph9, styles.flex1]}>
                 <View style={[styles.alignItemsCenter, styles.alignSelfCenter, styles.flexColumn, styles.gap2, styles.mb8]}>
-                    <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                    <View style={[styles.flexRow, styles.justifyContentCenter, StyleUtils.getWidthStyle(variables.eReceiptTextContainerWidth)]}>
                         <View style={[styles.flexColumn, styles.pt1]}>
                             <Text style={[styles.eReceiptCurrency, secondaryTextColorStyle]}>{currency}</Text>
                         </View>
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index d4fbab736ea0..6346cc42e03f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3339,16 +3339,12 @@ const styles = (theme: ThemeDefault) =>
         eReceiptAmountLarge: {
             ...headlineFont,
             fontSize: variables.fontSizeEReceiptLarge,
-            lineHeight: variables.lineHeightXXLarge,
-            wordBreak: 'break-word',
             textAlign: 'center',
         },
 
         eReceiptCurrency: {
             ...headlineFont,
             fontSize: variables.fontSizeXXLarge,
-            lineHeight: variables.lineHeightXXLarge,
-            wordBreak: 'break-all',
         },
 
         eReceiptMerchant: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index e7efcf4052d4..ea0af11d1b7a 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -167,6 +167,7 @@ export default {
     eReceiptWordmarkWidth: 86,
     eReceiptBGHeight: 540,
     eReceiptBGHWidth: 335,
+    eReceiptTextContainerWidth: 263,
     reportPreviewMaxWidth: 335,
     reportActionImagesSingleImageHeight: 147,
     reportActionImagesDoubleImageHeight: 138,