fix: remove alignment from ExpirableReadableMessage

improved alignment of timer by moving into the MessageContentWithStatus

ts/components/conversation/TimerNotification.tsx

@@ -49,8 +49,6 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
     <ExpirableReadableMessage
       messageId={messageId}
       isCentered={true}
-      marginInlineStart={'calc(var(--margins-lg) + 6px)'}
-      marginInlineEnd={'calc(var(--margins-lg) + 6px)'}
       key={`readable-message-${messageId}`}
       dataTestId={'disappear-control-message'}
     >

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

@@ -17,6 +17,7 @@ import { MessageContent } from './MessageContent';
 import { MessageContextMenu } from './MessageContextMenu';
 import { MessageReactions, StyledMessageReactions } from './MessageReactions';
 import { MessageStatus } from './MessageStatus';
+import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage';
 
 export type MessageContentWithStatusSelectorProps = Pick<
   MessageRenderingProps,
@@ -115,9 +116,10 @@ export const MessageContentWithStatuses = (props: Props) => {
         setPopupReaction('');
       }}
     >
-      <div
+      <ExpirableReadableMessage
+        messageId={messageId}
         className={classNames('module-message', `module-message--${direction}`)}
-        role="button"
+        role={'button'}
         onClick={onClickOnMessageOuterContainer}
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         data-testid={dataTestId}
@@ -144,7 +146,7 @@ export const MessageContentWithStatuses = (props: Props) => {
             enableReactions={enableReactions}
           />
         )}
-      </div>
+      </ExpirableReadableMessage>
       {enableReactions && (
         <MessageReactions
           messageId={messageId}

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

@@ -17,12 +17,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <ExpirableReadableMessage
+    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      messageId={messageId}
-      marginInlineStart={'calc(var(--margins-lg) + 6px)'}
-      marginInlineEnd={'calc(var(--margins-lg) + 6px)'}
-      key={`readable-message-${messageId}`}
-    >
       <Flex
         container={true}
         flexDirection="column"

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

@@ -83,14 +83,12 @@ export interface ExpirableReadableMessageProps
   extends Omit<ReadableMessageProps, 'receivedAt' | 'isUnread'> {
   messageId: string;
   isCentered?: boolean;
-  marginInlineStart?: string;
-  marginInlineEnd?: string;
 }
 
 export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => {
   const selected = useMessageExpirationPropsById(props.messageId);
 
-  const { isCentered, marginInlineStart = '6px', marginInlineEnd = '6px', dataTestId } = props;
+  const { isCentered, onClick, onDoubleClickCapture, role, dataTestId } = props;
 
   const { isExpired } = useIsExpired({
     convoId: selected?.convoId,
@@ -122,6 +120,9 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
       receivedAt={receivedAt}
       isUnread={!!isUnread}
       isIncoming={isIncoming}
+      onClick={onClick}
+      onDoubleClickCapture={onDoubleClickCapture}
+      role={role}
       key={`readable-message-${messageId}`}
       dataTestId={dataTestId}
     >
@@ -132,7 +133,6 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
           style={{
             display: !isCentered && isIncoming ? 'none' : 'block',
             visibility: !isIncoming ? 'visible' : 'hidden',
-            marginInlineStart,
           }}
         />
       )}
@@ -144,7 +144,6 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
           style={{
             display: !isCentered && !isIncoming ? 'none' : 'block',
             visibility: isIncoming ? 'visible' : 'hidden',
-            marginInlineEnd,
           }}
         />
       )}

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

@@ -12,9 +12,7 @@ import {
   isMessageSelectionMode,
 } from '../../../../state/selectors/conversations';
 import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
-import { ReadableMessage } from './ReadableMessage';
 import { isOpenOrClosedGroup } from '../../../../models/conversationAttributes';
-import { ExpirableReadableMessage } from './ExpirableReadableMessage';
 import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
 
 export type GenericReadableMessageSelectorProps = Pick<
@@ -40,7 +38,7 @@ const highlightedMessageAnimation = keyframes`
   }
 `;
 
-const StyledReadableMessage = styled(ReadableMessage)<{
+const StyledReadableMessage = styled.div<{
   selected: boolean;
   isRightClicked: boolean;
 }>`
@@ -148,14 +146,13 @@ export const GenericReadableMessage = (props: Props) => {
   if (!msgProps) {
     return null;
   }
-  const { conversationType, receivedAt, isUnread } = msgProps;
+  const { conversationType } = msgProps;
 
   const selected = isMessageSelected || false;
   const isGroup = isOpenOrClosedGroup(conversationType);
 
   return (
     <StyledReadableMessage
-      messageId={messageId}
       selected={selected}
       isRightClicked={isRightClicked}
       className={classNames(
@@ -163,19 +160,15 @@ export const GenericReadableMessage = (props: Props) => {
         isGroup && 'public-chat-message-wrapper'
       )}
       onContextMenu={handleContextMenu}
-      receivedAt={receivedAt}
-      isUnread={!!isUnread}
       key={`readable-message-${messageId}`}
     >
-      <ExpirableReadableMessage messageId={messageId}>
+      <MessageContentWithStatuses
-        <MessageContentWithStatuses
+        ctxMenuID={ctxMenuID}
-          ctxMenuID={ctxMenuID}
+        messageId={messageId}
-          messageId={messageId}
+        isDetailView={isDetailView}
-          isDetailView={isDetailView}
+        dataTestId={`message-content-${messageId}`}
-          dataTestId={`message-content-${messageId}`}
+        enableReactions={enableReactions}
-          enableReactions={enableReactions}
+      />
-        />
-      </ExpirableReadableMessage>
     </StyledReadableMessage>
   );
 };

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

@@ -1,5 +1,12 @@
 import { debounce, noop } from 'lodash';
-import React, { useCallback, useContext, useLayoutEffect, useState } from 'react';
+import React, {
+  AriaRole,
+  MouseEventHandler,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useState,
+} from 'react';
 import { InView } from 'react-intersection-observer';
 import { useDispatch, useSelector } from 'react-redux';
 import { Data } from '../../../../data/data';
@@ -29,6 +36,9 @@ export type ReadableMessageProps = {
   className?: string;
   receivedAt: number | undefined;
   isUnread: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
+  role?: AriaRole;
   dataTestId?: string;
   onContextMenu?: (e: React.MouseEvent<HTMLElement>) => void;
 };
@@ -58,7 +68,17 @@ const debouncedTriggerLoadMoreBottom = debounce(
 );
 
 export const ReadableMessage = (props: ReadableMessageProps) => {
-  const { messageId, onContextMenu, className, receivedAt, isUnread, dataTestId } = props;
+  const {
+    messageId,
+    onContextMenu,
+    className,
+    receivedAt,
+    isUnread,
+    onClick,
+    onDoubleClickCapture,
+    role,
+    dataTestId,
+  } = props;
 
   const isAppFocused = useSelector(getIsAppFocused);
   const dispatch = useDispatch();
@@ -183,6 +203,9 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
       onChange={isAppFocused ? onVisible : noop}
       triggerOnce={false}
       trackVisibility={true}
+      onClick={onClick}
+      onDoubleClickCapture={onDoubleClickCapture}
+      role={role}
       key={`inview-msg-${messageId}`}
       // TODO We will need to update the integration tests to use that new value, or update the values given in the `dataTestId` props to match what they expect
       data-testid={dataTestId || 'readable-message'}

ts/themes/globals.tsx

@@ -25,8 +25,6 @@ export type ThemeGlobals = {
   '--margins-xl': string;
 
   /* Padding */
-  '--padding-message-content-x': string;
-  '--padding-message-content-y': string;
   '--padding-message-content': string;
   '--padding-link-preview': string;
 
@@ -108,9 +106,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--margins-lg': '20px',
   '--margins-xl': '25px',
 
-  '--padding-message-content-x': '13px',
+  '--padding-message-content': '7px 13px',
-  '--padding-message-content-y': '7px',
-  '--padding-message-content': 'var(--padding-message-content-y) var(--padding-message-content-x)',
   '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below
 
   '--border-radius': '5px',