Merge pull request #22595 from Expensify/multiplavatars-background-fix

Fix clickable area of multiple avatars component (cherry picked from commit 69e5ee3)
Expensify · Jul 10, 2023 · 69563f6 · 69563f6
1 parent 1e0e54e
commit 69563f6
Show file tree

Hide file tree

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