From 52387d0b35e33fe0f80f135e32eab6637f2a2160 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Thu, 16 Nov 2023 11:21:57 +0100
Subject: [PATCH 1/3] Remove multipleAvatars-specific style

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 2 +-
 src/styles/styles.ts                                   | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index aa9d9d5c0070..e3bc1c6e23d6 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -309,7 +309,7 @@ function MoneyRequestPreview(props) {
                                     )}
                                 </View>
                                 {props.isBillSplit && (
-                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                    <View>
                                         <MultipleAvatars
                                             icons={participantAvatars}
                                             shouldStackHorizontally
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 3c5960f0e3d2..3d32d4fc74a5 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2658,11 +2658,6 @@ const styles = (theme: ThemeColors) =>
             width: '100%',
         },
 
-        moneyRequestPreviewBoxAvatar: {
-            marginRight: -10,
-            marginBottom: 0,
-        },
-
         moneyRequestPreviewAmount: {
             ...headlineFont,
             ...whiteSpace.preWrap,

From ae2392b231bc236aa4fa3617f3f59720dc1af7ad Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Thu, 16 Nov 2023 12:55:34 +0100
Subject: [PATCH 2/3] Remove the View around MultipleAvatars

---
 .../ReportActionItem/MoneyRequestPreview.js      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index e3bc1c6e23d6..d2e1db8a3793 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -309,15 +309,13 @@ function MoneyRequestPreview(props) {
                                     )}
                                 </View>
                                 {props.isBillSplit && (
-                                    <View>
-                                        <MultipleAvatars
-                                            icons={participantAvatars}
-                                            shouldStackHorizontally
-                                            size="small"
-                                            isHovered={props.isHovered}
-                                            shouldUseCardBackground
-                                        />
-                                    </View>
+                                    <MultipleAvatars
+                                        icons={participantAvatars}
+                                        shouldStackHorizontally
+                                        size="small"
+                                        isHovered={props.isHovered}
+                                        shouldUseCardBackground
+                                    />
                                 )}
                             </View>
                             {shouldShowMerchant && (

From a9a720262be97486dc3f71bb1d4ea33b4ad88a76 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Thu, 16 Nov 2023 15:31:23 +0100
Subject: [PATCH 3/3] Add the -2px margin to cover the last avatar's right
 border

---
 .../ReportActionItem/MoneyRequestPreview.js      | 16 +++++++++-------
 src/styles/styles.ts                             |  6 ++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index d2e1db8a3793..aa9d9d5c0070 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -309,13 +309,15 @@ function MoneyRequestPreview(props) {
                                     )}
                                 </View>
                                 {props.isBillSplit && (
-                                    <MultipleAvatars
-                                        icons={participantAvatars}
-                                        shouldStackHorizontally
-                                        size="small"
-                                        isHovered={props.isHovered}
-                                        shouldUseCardBackground
-                                    />
+                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                        <MultipleAvatars
+                                            icons={participantAvatars}
+                                            shouldStackHorizontally
+                                            size="small"
+                                            isHovered={props.isHovered}
+                                            shouldUseCardBackground
+                                        />
+                                    </View>
                                 )}
                             </View>
                             {shouldShowMerchant && (
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 3d32d4fc74a5..63e219d7e953 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2658,6 +2658,12 @@ const styles = (theme: ThemeColors) =>
             width: '100%',
         },
 
+        moneyRequestPreviewBoxAvatar: {
+            // This should "hide" the right border of the last avatar
+            marginRight: -2,
+            marginBottom: 0,
+        },
+
         moneyRequestPreviewAmount: {
             ...headlineFont,
             ...whiteSpace.preWrap,