Add the -2px margin to cover the last avatar's right border

Expensify · Nov 16, 2023 · a9a7202 · a9a7202
1 parent ae2392b
commit a9a7202
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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,