diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index a0cc3b6a4b29..50e5c5286547 100644 --- 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 index 707221a7c747..deebde877ffc 100644 --- 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', };