diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index a4cf84e986..fbf755fc03 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -438,6 +438,7 @@ let MessageItem = ({ isFromSelf={isFromSelf} squaredBottomCorner={squaredBottomCorner || hasEmbedAndText} squaredTopCorner={squaredTopCorner} + isFirstInCluster={isFirstInCluster} /> )} {rt.text.length > 0 && ( @@ -452,9 +453,10 @@ let MessageItem = ({ a.py_sm, a.px_md, { - marginTop: isFirstInCluster - ? 0 - : CLUSTERED_MESSAGE_GAP, + marginTop: + hasEmbedAndText || !isFirstInCluster + ? CLUSTERED_MESSAGE_GAP + : 0, backgroundColor: isFromSelf ? isPending ? pendingColor diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx index 7fce36530d..24918ef3af 100644 --- a/src/components/dms/MessageItemEmbed.tsx +++ b/src/components/dms/MessageItemEmbed.tsx @@ -15,11 +15,13 @@ let MessageItemEmbed = ({ isFromSelf, squaredTopCorner, squaredBottomCorner, + isFirstInCluster, }: { embed: $Typed isFromSelf: boolean squaredTopCorner: boolean squaredBottomCorner: boolean + isFirstInCluster: boolean }): React.ReactNode => { const t = useTheme() const screen = useWindowDimensions() @@ -34,15 +36,14 @@ let MessageItemEmbed = ({ width: Math.min(screen.width, 600) / 1.4, }), web({ - width: '100%', minWidth: 280, maxWidth: 360, }), { - marginTop: CLUSTERED_MESSAGE_GAP, + marginTop: isFirstInCluster ? 0 : CLUSTERED_MESSAGE_GAP, }, ]}> - +