Embedded Message: Fix render sender in title (#5645)

src/components/common/embedded/EmbeddedMessage.scss

@@ -119,6 +119,7 @@
   }
 
   .embedded-chat-icon {
+    margin-inline-end: 0.25rem;
     font-size: 0.75rem;
     vertical-align: middle;
   }
@@ -133,15 +134,27 @@
       align-items: center;
       flex-wrap: nowrap;
       flex: 1;
-      column-gap: 0.25rem;
     }
 
-    .message-title, .embedded-sender, .embedded-sender-chat {
+    .message-title, .embedded-sender, .embedded-sender-chat,
+    .embedded-message-title, .forward-sender-title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
+    .embedded-sender-wrapper,
+    .embedded-forward-sender-wrapper {
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+      overflow: hidden;
+    }
+
+    .embedded-sender-wrapper {
+      flex-shrink: 0;
+    }
+
     .embedded-text-wrapper {
       white-space: nowrap;
       overflow: hidden;

src/components/common/embedded/EmbeddedMessage.tsx

@@ -192,7 +192,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
     const isReplyToQuote = isInComposer && Boolean(replyInfo && 'quoteText' in replyInfo && replyInfo?.quoteText);
 
     return (
-      <>
+      <span className="embedded-sender-wrapper">
         {checkShouldRenderSenderTitle() && (
           <span className="embedded-sender">
             {renderText(isReplyToQuote ? lang('ReplyToQuote', senderTitle) : senderTitle)}
@@ -204,7 +204,18 @@ const EmbeddedMessage: FC<OwnProps> = ({
             {renderText(senderChatTitle)}
           </span>
         )}
-      </>
+      </span>
+    );
+  }
+
+  function renderForwardSender() {
+    return forwardSenderTitle && !areSendersSame && (
+      <span className="embedded-forward-sender-wrapper">
+        <Icon name={forwardSender ? 'share-filled' : 'forward'} className="embedded-origin-icon" />
+        <span className="forward-sender-title">
+          {renderText(forwardSenderTitle)}
+        </span>
+      </span>
     );
   }
 
@@ -236,12 +247,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
         </p>
         <div className="message-title">
           {renderSender()}
-          {forwardSenderTitle && !areSendersSame && (
+          {renderForwardSender()}
-            <>
-              <Icon name={forwardSender ? 'share-filled' : 'forward'} className="embedded-origin-icon" />
-              {renderText(forwardSenderTitle)}
-            </>
-          )}
         </div>
       </div>
     </PeerColorWrapper>