From 31c0b9ec700614fdd62a12cb0c3ad566956e5533 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 4 Oct 2023 14:05:00 +1100 Subject: [PATCH] fix: timer position for GenericReadableMessages still need to do other messages --- .../message/message-item/ExpirableReadableMessage.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx index 1c05164a3..701eba066 100644 --- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx +++ b/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, }} /> )}