fix: timer position for GenericReadableMessages

still need to do other messages

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

@@ -9,7 +9,10 @@ import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
 import { ReadableMessage, ReadableMessageProps } from './ReadableMessage';
 import { MessageModelType } from '../../../../models/messageType';
-import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelector';
+import {
+  useIsClosedGroup,
+  useMessageExpirationPropsById,
+} from '../../../../hooks/useParamSelector';
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
 
@@ -87,6 +90,7 @@ 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;
 
@@ -133,6 +137,9 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
           style={{
             display: !isCentered && isIncoming ? 'none' : 'block',
             visibility: !isIncoming ? 'visible' : 'hidden',
+            flexGrow: !isCentered ? 1 : undefined,
+            // Align timer with group member avatar
+            marginLeft: !isCentered && isClosedGroup ? '11px' : undefined,
           }}
         />
       )}
@@ -144,6 +151,8 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
           style={{
             display: !isCentered && !isIncoming ? 'none' : 'block',
             visibility: isIncoming ? 'visible' : 'hidden',
+            flexGrow: !isCentered ? 1 : undefined,
+            textAlign: !isCentered ? 'end' : undefined,
           }}
         />
       )}