fix: align expire timers with the member avatars

in groups

ts/components/conversation/SessionMessagesList.tsx

@@ -34,8 +34,12 @@ function isNotTextboxEvent(e: KeyboardEvent) {
   return (e?.target as any)?.type === undefined;
 }
 
-const StyledMessagesList = styled.div`
-  padding: 0 var(--margins-lg) 0;
+// isGroup is used to align the ExpireTimer with the member avatars
+const StyledMessagesList = styled.div<{ isGroup: boolean }>`
+  padding: ${props =>
+    props.isGroup
+      ? '0 var(--margins-lg) 0 calc(var(--margins-lg) + 11px)'
+      : '0 var(--margins-lg) 0'};
 `;
 
 let previousRenderedConvo: string | undefined;
@@ -49,6 +53,7 @@ export const SessionMessagesList = (props: {
   onPageDownPressed: () => void;
   onHomePressed: () => void;
   onEndPressed: () => void;
+  isGroup: boolean;
 }) => {
   const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
   const convoKey = useSelectedConversationKey();
@@ -101,7 +106,7 @@ export const SessionMessagesList = (props: {
   }
 
   return (
-    <StyledMessagesList>
+    <StyledMessagesList isGroup={props.isGroup}>
       {messagesProps.map(messageProps => {
         const messageId = messageProps.message.props.messageId;
         const unreadIndicator = messageProps.showUnreadIndicator ? (

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -144,6 +144,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
             onPageUpPressed={this.scrollPgUp}
             onHomePressed={this.scrollTop}
             onEndPressed={this.scrollEnd}
+            isGroup={!conversation.isMe && !conversation.isPrivate && !conversation.isPublic}
           />
         </ScrollToLoadedMessageContext.Provider>
 

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

@@ -36,10 +36,10 @@ export type MessageAvatarSelectorProps = Pick<
   'sender' | 'isSenderAdmin' | 'lastMessageOfSeries'
 >;
 
-type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean };
+type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean; isGroup: boolean };
 
 export const MessageAvatar = (props: Props) => {
-  const { messageId, hideAvatar, isPrivate } = props;
+  const { messageId, hideAvatar, isPrivate, isGroup } = props;
 
   const dispatch = useDispatch();
   const selectedConvoKey = useSelectedConversationKey();
@@ -137,6 +137,8 @@ export const MessageAvatar = (props: Props) => {
     <StyledAvatar
       key={`msg-avatar-${sender}`}
       style={{
+        // isGroup is used to align the ExpireTimer with the member avatars
+        marginInlineStart: isGroup ? '-11px' : undefined,
         visibility: hideAvatar ? 'hidden' : undefined,
       }}
     >

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

@@ -19,7 +19,7 @@ import { MessageReactions, StyledMessageReactions } from './MessageReactions';
 import { MessageStatus } from './MessageStatus';
 import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage';
 
-export type MessageContentWithStatusSelectorProps = Pick<
+export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick<
   MessageRenderingProps,
   'conversationType' | 'direction' | 'isDeleted'
 >;
@@ -95,7 +95,8 @@ export const MessageContentWithStatuses = (props: Props) => {
   if (!contentProps) {
     return null;
   }
-  const { conversationType, direction, isDeleted } = contentProps;
+
+  const { conversationType, direction, isDeleted, isGroup } = contentProps;
   const isIncoming = direction === 'incoming';
 
   const isPrivate = conversationType === 'private';
@@ -124,7 +125,12 @@ export const MessageContentWithStatuses = (props: Props) => {
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         data-testid={dataTestId}
       >
-        <MessageAvatar messageId={messageId} hideAvatar={hideAvatar} isPrivate={isPrivate} />
+        <MessageAvatar
+          messageId={messageId}
+          hideAvatar={hideAvatar}
+          isPrivate={isPrivate}
+          isGroup={isGroup}
+        />
         <MessageStatus
           dataTestId="msg-status-incoming"
           messageId={messageId}

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

@@ -9,10 +9,7 @@ import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
 import { ReadableMessage, ReadableMessageProps } from './ReadableMessage';
 import { MessageModelType } from '../../../../models/messageType';
-import {
-  useIsClosedGroup,
-  useMessageExpirationPropsById,
-} from '../../../../hooks/useParamSelector';
+import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelector';
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
 
@@ -90,7 +87,6 @@ export interface ExpirableReadableMessageProps
 
 export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => {
   const selected = useMessageExpirationPropsById(props.messageId);
-  const isClosedGroup = useIsClosedGroup(selected?.convoId);
 
   const { isCentered, onClick, onDoubleClickCapture, role, dataTestId } = props;
 
@@ -138,8 +134,6 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
             display: !isCentered && isIncoming ? 'none' : 'block',
             visibility: !isIncoming ? 'visible' : 'hidden',
             flexGrow: !isCentered ? 1 : undefined,
-            // Align timer with group member avatar
-            marginLeft: !isCentered && isClosedGroup ? '11px' : undefined,
           }}
         />
       )}

ts/state/selectors/conversations.ts

@@ -938,8 +938,12 @@ export const getMessageContentWithStatusesSelectorProps = createSelector(
       return undefined;
     }
 
+    const isGroup =
+      props.propsForMessage.conversationType !== 'private' && !props.propsForMessage.isPublic;
+
     const msgProps: MessageContentWithStatusSelectorProps = {
       ...pick(props.propsForMessage, ['conversationType', 'direction', 'isDeleted']),
+      isGroup,
     };
 
     return msgProps;