From fed98f759880ff5e831b63137f90f42a774b2cb4 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 26 Oct 2021 10:43:27 +0900
Subject: [PATCH] Create container containg message item body and emoji
 reactions components to match width of them

---
 src/ui/MessageContent/index.scss |  19 ++++-
 src/ui/MessageContent/index.tsx  | 119 ++++++++++++++++---------------
 2 files changed, 78 insertions(+), 60 deletions(-)

diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss
index 1a98398b8..a6ae85d15 100644
--- a/src/ui/MessageContent/index.scss
+++ b/src/ui/MessageContent/index.scss
@@ -9,9 +9,8 @@
   &.incoming { justify-content: flex-start; }
   &.outgoing { justify-content: flex-end; }
   .sendbird-message-content__middle {
-    .sendbird-message-content__middle__message-item-body.use-quote {
+    .sendbird-message-content__middle__body-container.use-quote {
       top: -8px;
-      width: fit-content;
     }
   }
 }
@@ -149,6 +148,10 @@
       &.outgoing { justify-content: flex-end }
       &.incoming { justify-content: flex-start }
     }
+
+    .sendbird-message-content__middle__body-container {
+      width: fit-content;
+    }
   }
 
   .sendbird-message-content__right {
@@ -167,6 +170,18 @@
   }
 }
 
+.sendbird-message-content__middle__body-container {
+  position: relative;
+  width: fit-content;
+  .sendbird-message-content__middle__message-item-body {
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .sendbird-message-content-reactions {
+    width: 100%;
+  }
+}
+
 .sendbird-message-content-reactions {
   position: relative;
   width: 100%;
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 7f0245d1a..21d653695 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -185,68 +185,71 @@ export default function MessageContent({
         {/* quote message */}
         {(useReplying) ? (
           <div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming'])}>
-          <QuoteMessage message={message} isByMe={isByMe} />
+            <QuoteMessage message={message} isByMe={isByMe} />
           </div>
-        ): null}
-        {/* message item body components */}
-        {isTextMessage(message as UserMessage) && (
-          <TextMessageItemBody
-            className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
-            message={message as UserMessage}
-            isByMe={isByMe}
-            mouseHover={mouseHover}
-          />
-        )}
-        {(isOGMessage(message as UserMessage)) && (
-          <OGMessageItemBody
-            className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
-            message={message as UserMessage}
-            isByMe={isByMe}
-            mouseHover={mouseHover}
-          />
-        )}
-        {(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (
-          <FileMessageItemBody
-            className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
-            message={message as FileMessage}
-            isByMe={isByMe}
-            mouseHover={mouseHover}
-          />
-        )}
-        {(isThumbnailMessage(message as FileMessage)) && (
-          <ThumbnailMessageItemBody
-            className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
-            message={message as FileMessage}
-            isByMe={isByMe}
-            mouseHover={mouseHover}
-            showFileViewer={showFileViewer}
-          />
-        )}
-        {(getUIKitMessageType((message as FileMessage)) === messageTypes.UNKNOWN) && (
-          <UnknownMessageItemBody
-            className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
-            message={message}
-            isByMe={isByMe}
-            mouseHover={mouseHover}
-          />
-        )}
-        {/* reactions */}
-        {(useReaction && message?.reactions?.length > 0) && (
-          <div className={getClassName([
-            'sendbird-message-content-reactions',
-            (!isByMe || isThumbnailMessage(message as FileMessage) || isOGMessage(message as UserMessage)) ? '' : 'primary',
-            mouseHover ? 'mouse-hover' : '',
-          ])}>
-            <EmojiReactions
-              userId={userId}
+        ) : null}
+        {/* container: message item body + emoji reactions */}
+        <div className={getClassName(['sendbird-message-content__middle__body-container', useReplyingClassName])} >
+          {/* message item body components */}
+          {isTextMessage(message as UserMessage) && (
+            <TextMessageItemBody
+              className="sendbird-message-content__middle__message-item-body"
+              message={message as UserMessage}
+              isByMe={isByMe}
+              mouseHover={mouseHover}
+            />
+          )}
+          {(isOGMessage(message as UserMessage)) && (
+            <OGMessageItemBody
+              className="sendbird-message-content__middle__message-item-body"
+              message={message as UserMessage}
+              isByMe={isByMe}
+              mouseHover={mouseHover}
+            />
+          )}
+          {(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (
+            <FileMessageItemBody
+              className="sendbird-message-content__middle__message-item-body"
+              message={message as FileMessage}
+              isByMe={isByMe}
+              mouseHover={mouseHover}
+            />
+          )}
+          {(isThumbnailMessage(message as FileMessage)) && (
+            <ThumbnailMessageItemBody
+              className="sendbird-message-content__middle__message-item-body"
+              message={message as FileMessage}
+              isByMe={isByMe}
+              mouseHover={mouseHover}
+              showFileViewer={showFileViewer}
+            />
+          )}
+          {(getUIKitMessageType((message as FileMessage)) === messageTypes.UNKNOWN) && (
+            <UnknownMessageItemBody
+              className="sendbird-message-content__middle__message-item-body"
               message={message}
               isByMe={isByMe}
-              emojiContainer={emojiContainer}
-              memberNicknamesMap={nicknamesMap}
-              toggleReaction={toggleReaction}
+              mouseHover={mouseHover}
             />
-          </div>
-        )}
+          )}
+          {/* reactions */}
+          {(useReaction && message?.reactions?.length > 0) && (
+            <div className={getClassName([
+              'sendbird-message-content-reactions',
+              (!isByMe || isThumbnailMessage(message as FileMessage) || isOGMessage(message as UserMessage)) ? '' : 'primary',
+              mouseHover ? 'mouse-hover' : '',
+            ])}>
+              <EmojiReactions
+                userId={userId}
+                message={message}
+                isByMe={isByMe}
+                emojiContainer={emojiContainer}
+                memberNicknamesMap={nicknamesMap}
+                toggleReaction={toggleReaction}
+              />
+            </div>
+          )}
+        </div>
       </div>
       {/* right */}
       <div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>