Merge pull request #23580 from DrLoopFall/fix-workspace-icons-are-ali…

…gned-to-the-left-22632 Fix MulitpleAvatars alignment
Expensify · Jul 27, 2023 · f3196c1 · f3196c1
2 parents b50948a + c931dd9
commit f3196c1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -151,18 +151,9 @@ function MultipleAvatars(props) {
     const overlapSize = oneAvatarSize.width / 3;
 
     if (props.shouldStackHorizontally) {
-        let width;
-
         // Height of one avatar + border space
         const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
-        if (props.icons.length > 4) {
-            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);
-        }
-        avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), StyleUtils.getWidthStyle(width)]);
+        avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height)]);
     }
 
     return (

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -904,7 +904,7 @@ function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReport
  */
 function getHorizontalStackedAvatarStyle(index, overlapSize, borderWidth, borderRadius) {
     return {
-        left: -(overlapSize * index),
+        marginLeft: index > 0 ? -overlapSize : 0,
         borderRadius,
         borderWidth,
         zIndex: index + 2,
@@ -921,7 +921,7 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWi
     return {
         borderWidth: oneAvatarBorderWidth,
         borderRadius: oneAvatarSize.width,
-        left: -(oneAvatarSize.width * 2 + oneAvatarBorderWidth * 2),
+        marginLeft: -(oneAvatarSize.width + oneAvatarBorderWidth * 2),
         zIndex: 6,
         borderStyle: 'solid',
     };