From 461a23337f948d4b21b97a05fe3fff1b0aa19f79 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 20 Oct 2023 16:57:53 +1100
Subject: [PATCH] fix: alignment message correctly in detail view

---
 ts/components/conversation/header/ConversationHeader.tsx     | 2 ++
 .../message/message-content/MessageContentWithStatus.tsx     | 1 +
 .../message/message-item/ExpirableReadableMessage.tsx        | 5 ++++-
 .../right-panel/overlay/message-info/OverlayMessageInfo.tsx  | 2 +-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx
index df5925e33..b8ccef618 100644
--- a/ts/components/conversation/header/ConversationHeader.tsx
+++ b/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());
diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
index 1406516a6..8c42fd401 100644
--- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
+++ b/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}
diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx
index cd1be7ac9..8a4f5a7d0 100644
--- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx
+++ b/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 (
diff --git a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx
index 385ba90b3..e20ab8af1 100644
--- a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx
+++ b/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"