fix: apply ellipsis to quote and admin msg (#584)

### Description Of Changes

* fix: apply ellipsis to the QuoteMessage
* fix: break-word of AdminMessage

[UIKIT-3986](https://sendbird.atlassian.net/browse/UIKIT-3986)

Author: HoonBaek

src/ui/AdminMessage/index.scss

@@ -7,5 +7,7 @@
 
   .sendbird-admin-message__text {
     display: flex;
+    width: 100%;
+    word-break: break-word;
   }
 }

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 {

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}

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;