From 9d65e622ba85cd3ae8b58995ee06bfa017568092 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 31 May 2025 13:25:04 +0800
Subject: [PATCH 1/2] fix receipt image doesn't take full width

---
 .../MoneyRequestConfirmationListFooter.tsx      | 17 +++++++++--------
 .../ReportActionItem/MoneyRequestView.tsx       |  3 ++-
 src/styles/index.ts                             |  3 +--
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
index bfa1625818ce..c25c309e57e2 100644
--- a/src/components/MoneyRequestConfirmationListFooter.tsx
+++ b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -908,12 +908,12 @@ function MoneyRequestConfirmationListFooter({
                     <View style={styles.dividerLine} />
                 </>
             )}
-            {!shouldShowMap &&
+            {!shouldShowMap && (
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                (receiptImage || receiptThumbnail
-                    ? receiptThumbnailContent
-                    : shouldShowReceiptEmptyState && (
-                          <View style={styles.mv3}>
+                <View style={styles.mv3}>
+                    {receiptImage || receiptThumbnail
+                        ? receiptThumbnailContent
+                        : shouldShowReceiptEmptyState && (
                               <ReceiptEmptyState
                                   onPress={() => {
                                       if (!transactionID) {
@@ -922,10 +922,11 @@ function MoneyRequestConfirmationListFooter({
 
                                       Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()));
                                   }}
-                                  style={[styles.expenseViewImageSmall, styles.mv0]}
+                                  style={styles.expenseViewImageSmall}
                               />
-                          </View>
-                      ))}
+                          )}
+                </View>
+            )}
             {primaryFields}
             {!shouldShowAllFields && (
                 <ShowMoreButton
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index d6757778204a..ad7e283dee6d 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -557,7 +557,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
                             }}
                             isThumbnail={!canEditReceipt}
                             isInMoneyRequestView
-                            style={[receiptStyle, styles.mv0]}
+                            style={receiptStyle}
                         />
                     </OfflineWithFeedback>
                 )}
@@ -582,6 +582,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
                             }
                         }}
                         dismissError={dismissReceiptError}
+                        style={styles.mv3}
                     >
                         {hasReceipt && (
                             <View style={[styles.moneyRequestViewImage, receiptStyle]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1012d9651b34..c828859e5577 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4688,7 +4688,7 @@ const styles = (theme: ThemeColors) =>
         moneyRequestImage: {
             height: 200,
             borderRadius: 16,
-            margin: 20,
+            marginHorizontal: 20,
             overflow: 'hidden',
             borderWidth: 1,
             borderColor: theme.border,
@@ -4866,7 +4866,6 @@ const styles = (theme: ThemeColors) =>
 
         moneyRequestViewImage: {
             ...spacing.mh5,
-            ...spacing.mv3,
             overflow: 'hidden',
             borderWidth: 1,
             borderColor: theme.border,

From 60d40b2e516ad6953670c7c5b849bf92b90e0e0b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 31 May 2025 14:11:56 +0800
Subject: [PATCH 2/2] lint

---
 .../MoneyRequestConfirmationListFooter.tsx    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
index c25c309e57e2..64849934faa5 100644
--- a/src/components/MoneyRequestConfirmationListFooter.tsx
+++ b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -909,22 +909,26 @@ function MoneyRequestConfirmationListFooter({
                 </>
             )}
             {!shouldShowMap && (
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 <View style={styles.mv3}>
-                    {receiptImage || receiptThumbnail
-                        ? receiptThumbnailContent
-                        : shouldShowReceiptEmptyState && (
-                              <ReceiptEmptyState
-                                  onPress={() => {
-                                      if (!transactionID) {
-                                          return;
-                                      }
-
-                                      Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()));
-                                  }}
-                                  style={styles.expenseViewImageSmall}
-                              />
-                          )}
+                    {
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        receiptImage || receiptThumbnail
+                            ? receiptThumbnailContent
+                            : shouldShowReceiptEmptyState && (
+                                  <ReceiptEmptyState
+                                      onPress={() => {
+                                          if (!transactionID) {
+                                              return;
+                                          }
+
+                                          Navigation.navigate(
+                                              ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()),
+                                          );
+                                      }}
+                                      style={styles.expenseViewImageSmall}
+                                  />
+                              )
+                    }
                 </View>
             )}
             {primaryFields}