modified message width in open channel

Author: HoonBaek

src/modules/OpenChannel/components/OpenChannelMessage/index.tsx

@@ -1,3 +1,4 @@
+import './open-channel-message.scss';
 import React, { useState, useRef, ReactElement } from 'react';
 import { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
 import { User } from '@sendbird/chat';
@@ -8,7 +9,6 @@ import OpenChannelAdminMessage from '../../../../ui/OpenChannelAdminMessage';
 import OpenChannelOGMessage from '../../../../ui/OpenchannelOGMessage';
 import OpenChannelThumbnailMessage from '../../../../ui/OpenchannelThumbnailMessage';
 import OpenChannelFileMessage from '../../../../ui/OpenchannelFileMessage';
-// import UnknownMessage from '../../../../ui/UnknownMessage';
 
 import DateSeparator from '../../../../ui/DateSeparator';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
@@ -73,7 +73,7 @@ export default function OpenChannelMessage(
 
   if (renderMessage) {
     return (
-      <div className="sendbird-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
+      <div className="sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
         {renderMessage({ message, chainTop, chainBottom })}
       </div>
     );
@@ -99,7 +99,7 @@ export default function OpenChannelMessage(
   }
 
   return (
-    <div className="sendbird-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
+    <div className="sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
       <>
         {/* date-separator */}
         {hasSeparator && message?.createdAt && (

src/modules/OpenChannel/components/OpenChannelMessage/open-channel-message.scss

@@ -0,0 +1,3 @@
+.sendbird-open-channel-msg-hoc {
+  min-width: 380px;
+}

src/ui/OpenchannelFileMessage/index.scss

@@ -56,6 +56,7 @@
       margin-top: 4px;
       margin-bottom: 4px;
       border-radius: 8px;
+      max-width: 360px;
       @include themed() {
         background-color: t(bg-1);
         border: solid 1px t(on-bg-4);
@@ -79,8 +80,12 @@
         overflow: hidden;
         height: 20px;
         max-height: 20px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        
+        .sendbird-openchannel-file-message__right__body__file-name__label {
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
   }

src/ui/OpenchannelFileMessage/index.tsx

@@ -183,6 +183,7 @@ export default function OpenChannelFileMessage({
               onClick={openFileUrl}
             >
               <Label
+                className="sendbird-openchannel-file-message__right__body__file-name__label"
                 type={LabelTypography.BODY_1}
                 color={LabelColors.ONBACKGROUND_1}
               >

src/ui/OpenchannelOGMessage/index.scss

@@ -103,7 +103,7 @@
       position: relative;
       display: inline-block;
       box-sizing: border-box;
-      width: calc(100% - 64px);
+      min-width: 360px;
       max-width: 360px;
       left: 64px;
       padding: 12px 12px 4px 12px;