fix: avatar at bottom, reacts with margin

stylesheets/_session_theme.scss

@@ -25,7 +25,7 @@
   position: relative;
   display: inline-flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-end;
   max-width: 95%;
 
   @media (min-width: 1200px) {

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

@@ -11,7 +11,7 @@ import {
   isMessageSelectionMode,
 } from '../../../../state/selectors/conversations';
 import { Reactions } from '../../../../util/reactions';
-
+import { MessageAvatar } from '../message-content/MessageAvatar';
 import { MessageAuthorText } from './MessageAuthorText';
 import { MessageContent } from './MessageContent';
 import { MessageContextMenu } from './MessageContextMenu';
@@ -118,6 +118,7 @@ export const MessageContentWithStatuses = (props: Props) => {
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         data-testid={dataTestId}
       >
+        <MessageAvatar messageId={messageId} />
         <MessageStatus
           dataTestId="msg-status-incoming"
           messageId={messageId}
@@ -125,7 +126,6 @@ export const MessageContentWithStatuses = (props: Props) => {
         />
         <StyledMessageWithAuthor isIncoming={isIncoming}>
           <MessageAuthorText messageId={messageId} />
-
           <MessageContent messageId={messageId} isDetailView={isDetailView} />
         </StyledMessageWithAuthor>
         <MessageStatus

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

@@ -16,6 +16,9 @@ export const popupXDefault = -81;
 export const popupYDefault = -90;
 
 const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number }>`
+  div:first-child {
+    margin-left: 1.7rem;
+  }
   ${StyledPopupContainer} {
     position: absolute;
     top: ${props => `${props.y}px;`};

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -16,7 +16,7 @@ import {
 } from '../../../../state/selectors/conversations';
 import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
-import { MessageAvatar } from '../message-content/MessageAvatar';
+
 import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
 import { ReadableMessage } from './ReadableMessage';
 import styled, { keyframes } from 'styled-components';
@@ -238,7 +238,6 @@ export const GenericReadableMessage = (props: Props) => {
       isUnread={!!isUnread}
       key={`readable-message-${messageId}`}
     >
-      <MessageAvatar messageId={messageId} />
       {expirationLength && expirationTimestamp && (
         <ExpireTimer
           isCorrectSide={!isIncoming}