From 279642dff3921f3fd21dd2448b959134b3ee89aa Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 1 Jun 2023 16:37:09 +1000
Subject: [PATCH] fix: resolves SES-583 left alignment of outgoing messages on
 smaller screens

---
 stylesheets/_session_theme.scss                     |  2 +-
 .../message/message-content/MessageAvatar.tsx       | 13 ++++++-------
 .../message-content/MessageContentWithStatus.tsx    |  6 +++---
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index d71bd26e7..6b7b677ae 100644
--- a/stylesheets/_session_theme.scss
+++ b/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%;
diff --git a/ts/components/conversation/message/message-content/MessageAvatar.tsx b/ts/components/conversation/message/message-content/MessageAvatar.tsx
index 741606859..37fb956a4 100644
--- a/ts/components/conversation/message/message-content/MessageAvatar.tsx
+++ b/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>
diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
index d4ee14025..0c9f54fc3 100644
--- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
+++ b/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>