Fix chat message spacing and alignment (#10579)

src/components/dms/MessageItem.tsx

@@ -68,7 +68,6 @@ function isWithinClusterBoundary({
   direction: 'prev' | 'next'
 }): boolean {
   if (!isFromSameSender) return true
-  if (isPending && adjacentMessage) return false
   if (ChatBskyConvoDefs.isMessageView(adjacentMessage)) {
     const thisDate = new Date(currentSentAt)
     const adjDate = new Date(adjacentMessage.sentAt)
@@ -76,7 +75,10 @@ function isWithinClusterBoundary({
       direction === 'next'
         ? adjDate.getTime() - thisDate.getTime()
         : thisDate.getTime() - adjDate.getTime()
-    return diff > CLUSTERED_MESSAGE_THRESHOLD_MS
+    const isOutsideThreshold = diff > CLUSTERED_MESSAGE_THRESHOLD_MS
+    // For pending messages, still check the time threshold
+    if (isPending) return isOutsideThreshold
+    return isOutsideThreshold
   }
   return true
 }
@@ -386,7 +388,11 @@ let MessageItem = ({
   return (
     <>
       {hasLargeGapFromPrev && <DateDivider date={message.sentAt} />}
-      <View style={[messageInset, isFirstInCluster && a.mt_md]}>
+      <View
+        style={[
+          messageInset,
+          isFirstInCluster ? a.mt_md : {marginTop: CLUSTERED_MESSAGE_GAP},
+        ]}>
         <View style={[a.relative]}>
           {showAvatar ? (
             <View
@@ -435,9 +441,9 @@ let MessageItem = ({
                 <MessageItemEmbed
                   embed={message.embed}
                   isFromSelf={isFromSelf}
+                  isGroupChat={isGroupChat}
                   squaredBottomCorner={squaredBottomCorner || hasEmbedAndText}
                   squaredTopCorner={squaredTopCorner}
-                  isFirstInCluster={isFirstInCluster}
                 />
               )}
               {rt.text.length > 0 && (
@@ -450,10 +456,7 @@ let MessageItem = ({
                       a.py_sm,
                       a.px_md,
                       {
-                        marginTop:
-                          hasEmbedAndText || !isFirstInCluster
-                            ? CLUSTERED_MESSAGE_GAP
-                            : 0,
+                        marginTop: hasEmbedAndText ? CLUSTERED_MESSAGE_GAP : 0,
                         backgroundColor: isFromSelf
                           ? isPending
                             ? pendingColor