From 69563f6ca2c4b724e677feb07e3f0cf6d5e9a43f Mon Sep 17 00:00:00 2001
From: Brandon Stites <42391420+stitesExpensify@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:37:20 -0600
Subject: [PATCH] Merge pull request #22595 from
 Expensify/multiplavatars-background-fix

Fix clickable area of multiple avatars component

(cherry picked from commit 69e5ee326eb1352eb0ec5c8f29ef15e7cab2d463)
---
 src/components/MultipleAvatars.js                | 4 ++--
 src/pages/home/report/ReportActionItemCreated.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 2ac9724ccd14..c2001b664b12 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -142,8 +142,8 @@ function MultipleAvatars(props) {
         // Height of one avatar + border space
         const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
         if (props.icons.length > 4) {
-            // Width of overlapping avatars + border space
-            width = oneAvatarSize.width * 3 + oneAvatarBorderWidth * 8;
+            const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
+            width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
         } else {
             // one avatar width + overlaping avatar sizes + border space
             width = oneAvatarSize.width + overlapSize * 2 * (props.icons.length - 1) + oneAvatarBorderWidth * (props.icons.length * 2);
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index 095b6ac350c3..4f3ea87245bb 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -73,7 +73,7 @@ function ReportActionItemCreated(props) {
                 >
                     <PressableWithoutFeedback
                         onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
-                        style={[styles.ph5, styles.pb3, styles.alignSelfStart]}
+                        style={[styles.mh5, styles.mb3, styles.alignSelfStart]}
                         accessibilityLabel={props.translate('common.details')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     >