fix: alignment for group messages with no avatar

this happens with multiple incoming messages

ts/components/conversation/message/message-content/MessageAvatar.tsx

@@ -36,10 +36,10 @@ export type MessageAvatarSelectorProps = Pick<
   'sender' | 'isSenderAdmin' | 'lastMessageOfSeries'
 >;
 
-type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean; isGroup: boolean };
+type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean };
 
 export const MessageAvatar = (props: Props) => {
-  const { messageId, hideAvatar, isPrivate, isGroup } = props;
+  const { messageId, hideAvatar, isPrivate } = props;
 
   const dispatch = useDispatch();
   const selectedConvoKey = useSelectedConversationKey();
@@ -137,8 +137,6 @@ export const MessageAvatar = (props: Props) => {
     <StyledAvatar
       key={`msg-avatar-${sender}`}
       style={{
-        // isGroup is used to align the ExpireTimer with the member avatars
-        marginInlineStart: isGroup ? '-11px' : undefined,
         visibility: hideAvatar ? 'hidden' : undefined,
       }}
     >

ts/components/conversation/message/message-content/MessageContentWithStatus.tsx

@@ -52,6 +52,11 @@ const StyledMessageWithAuthor = styled.div<{ isIncoming: boolean }>`
   min-width: 0;
 `;
 
+// NOTE aligns group member avatars with the ExpireTimer
+const StyledAvatarContainer = styled.div<{ hideAvatar: boolean; isGroup: boolean }>`
+  margin-inline-start: ${props => (!props.hideAvatar && props.isGroup ? '-11px' : '')};
+`;
+
 export const MessageContentWithStatuses = (props: Props) => {
   const contentProps = useSelector((state: StateType) =>
     getMessageContentWithStatusesSelectorProps(state, props.messageId)
@@ -126,12 +131,9 @@ export const MessageContentWithStatuses = (props: Props) => {
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         dataTestId={dataTestId}
       >
-        <MessageAvatar
+        <StyledAvatarContainer hideAvatar={hideAvatar} isGroup={isGroup}>
-          messageId={messageId}
+          <MessageAvatar messageId={messageId} hideAvatar={hideAvatar} isPrivate={isPrivate} />
-          hideAvatar={hideAvatar}
+        </StyledAvatarContainer>
-          isPrivate={isPrivate}
-          isGroup={isGroup}
-        />
         <MessageStatus
           dataTestId="msg-status-incoming"
           messageId={messageId}