fix: alignment message correctly in detail view

ts/components/conversation/header/ConversationHeader.tsx

@@ -16,6 +16,7 @@ import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
+  // TODO remove I think?
   const isMessageDetailOpened = useSelector(isMessageDetailView);
   const selectedConvoKey = useSelectedConversationKey();
   const dispatch = useDispatch();
@@ -33,6 +34,7 @@ export const ConversationHeaderWithDetails = () => {
         width="100%"
         flexGrow={1}
       >
+        {/* TODO do we remove */}
         <BackButton
           onGoBack={() => {
             dispatch(closeMessageDetailsView());

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

@@ -134,6 +134,7 @@ export const MessageContentWithStatuses = (props: Props) => {
         messageId={messageId}
         className={classNames('module-message', `module-message--${direction}`)}
         role={'button'}
+        isDetailView={isDetailView}
         onClick={onClickOnMessageOuterContainer}
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         dataTestId={dataTestId}

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

@@ -83,6 +83,7 @@ export interface ExpirableReadableMessageProps
   extends Omit<ReadableMessageProps, 'receivedAt' | 'isUnread'> {
   messageId: string;
   isCentered?: boolean;
+  isDetailView?: boolean;
 }
 
 export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => {
@@ -105,13 +106,15 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
 
   const {
     messageId,
-    direction,
+    direction: _direction,
     receivedAt,
     isUnread,
     expirationDurationMs,
     expirationTimestamp,
   } = selected;
 
+  // NOTE we want messages on the left in the message detail view regardless of direction
+  const direction = props.isDetailView ? 'incoming' : _direction;
   const isIncoming = direction === 'incoming';
 
   return (

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -185,7 +185,7 @@ export const OverlayMessageInfo = () => {
             )}
             <MessageInfo />
             <SpacerLG />
-            <PanelButtonGroup>
+            <PanelButtonGroup style={{ margin: '0' }}>
               <PanelIconButton
                 text={window.i18n('replyToMessage')}
                 iconType="reply"