From cc350005504dd5bba45feb08c19424f317d82413 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 1 Jun 2023 15:26:04 +0900
Subject: [PATCH 1/2] Apply ellipsis to the quote message

---
 src/ui/MessageContent/index.scss | 7 +++++++
 src/ui/MessageContent/index.tsx  | 1 +
 src/ui/QuoteMessage/index.scss   | 2 ++
 3 files changed, 10 insertions(+)

diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss
index a016f8200..e8b7268f6 100644
--- a/src/ui/MessageContent/index.scss
+++ b/src/ui/MessageContent/index.scss
@@ -27,6 +27,10 @@
   }
 }
 
+.sendbird-message-content__middle__quote-message__quote {
+  width: 100%;
+}
+
 // incoming
 .sendbird-message-content.incoming {
   .sendbird-message-content__left {
@@ -69,6 +73,9 @@
       position: relative;
       margin-left: 12px;
       margin-bottom: 4px;
+      width: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
     }
 
     .sendbird-message-content__middle__quote-message {
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index bee4bed84..615e7437c 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -260,6 +260,7 @@ export default function MessageContent({
         {(useReplying) ? (
           <div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])}>
             <QuoteMessage
+              className="sendbird-message-content__middle__quote-message__quote"
               message={message as UserMessage | FileMessage}
               userId={userId}
               isByMe={isByMe}
diff --git a/src/ui/QuoteMessage/index.scss b/src/ui/QuoteMessage/index.scss
index de1b79d27..01596a4f5 100644
--- a/src/ui/QuoteMessage/index.scss
+++ b/src/ui/QuoteMessage/index.scss
@@ -7,6 +7,7 @@
   flex-direction: column;
   &.incoming { align-items: flex-start; }
   &.outgoing { align-items: flex-end; }
+  width: 100%;
   max-width: 400px;
 
   .sendbird-quote-message__replied-to {
@@ -16,6 +17,7 @@
     align-items: center;
     height: 16px;
     padding: 0px 12px;
+    width: 100%;
     .sendbird-quote-message__replied-to__icon {
       position: relative;
       margin-bottom: 4px;

From 7b75fdfb0300d474c72403db42498a06772f42d3 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 1 Jun 2023 15:26:28 +0900
Subject: [PATCH 2/2] Apply word-break break-word to the AdminMessage

---
 src/ui/AdminMessage/index.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/AdminMessage/index.scss b/src/ui/AdminMessage/index.scss
index af2597dac..e8c8ec535 100644
--- a/src/ui/AdminMessage/index.scss
+++ b/src/ui/AdminMessage/index.scss
@@ -7,5 +7,7 @@
 
   .sendbird-admin-message__text {
     display: flex;
+    width: 100%;
+    word-break: break-word;
   }
 }