fix: resolves SES-583 left alignment of outgoing messages on smaller screens

stylesheets/_session_theme.scss

@@ -26,7 +26,7 @@
   display: inline-flex;
   flex-direction: row;
   align-items: flex-end;
-  max-width: 95%;
+  max-width: 100%;
 
   @media (min-width: 1200px) {
     max-width: 65%;

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

@@ -35,10 +35,10 @@ export type MessageAvatarSelectorProps = Pick<
   | 'lastMessageOfSeries'
 >;
 
-type Props = { messageId: string; noAvatar: boolean };
+type Props = { messageId: string; hideAvatar: boolean };
 
 export const MessageAvatar = (props: Props) => {
-  const { messageId, noAvatar } = props;
+  const { messageId, hideAvatar } = props;
 
   const dispatch = useDispatch();
   const avatarProps = useSelector(state => getMessageAvatarProps(state as any, messageId));
@@ -60,10 +60,6 @@ export const MessageAvatar = (props: Props) => {
     isPublic,
   } = avatarProps;
 
-  if (noAvatar) {
-    return null;
-  }
-
   const userName = authorName || authorProfileName || sender;
 
   const onMessageAvatarClick = useCallback(async () => {
@@ -128,7 +124,10 @@ export const MessageAvatar = (props: Props) => {
   }
 
   return (
-    <StyledAvatar key={`msg-avatar-${sender}`}>
+    <StyledAvatar
+      key={`msg-avatar-${sender}`}
+      style={{ visibility: hideAvatar ? 'hidden' : undefined }}
+    >
       <Avatar size={AvatarSize.S} onAvatarClick={onMessageAvatarClick} pubkey={sender} />
       {isSenderAdmin && <CrownIcon />}
     </StyledAvatar>

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

@@ -94,7 +94,7 @@ export const MessageContentWithStatuses = (props: Props) => {
   }
   const { conversationType, direction, isDeleted } = contentProps;
   const isIncoming = direction === 'incoming';
-  const noAvatar = conversationType !== 'group' || direction === 'outgoing';
+  const hideAvatar = conversationType !== 'group' || direction === 'outgoing';
 
   const [popupReaction, setPopupReaction] = useState('');
 
@@ -120,7 +120,7 @@ export const MessageContentWithStatuses = (props: Props) => {
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         data-testid={dataTestId}
       >
-        <MessageAvatar messageId={messageId} noAvatar={noAvatar} />
+        <MessageAvatar messageId={messageId} hideAvatar={hideAvatar} />
         <MessageStatus
           dataTestId="msg-status-incoming"
           messageId={messageId}
@@ -150,7 +150,7 @@ export const MessageContentWithStatuses = (props: Props) => {
           popupReaction={popupReaction}
           setPopupReaction={setPopupReaction}
           onPopupClick={handlePopupClick}
-          noAvatar={noAvatar}
+          noAvatar={hideAvatar}
         />
       )}
     </StyledMessageContentContainer>