Skip to content

Commit 3c5399b

Browse files
authored
fix: modified message width in open channel (#1299)
[CLNP-6094](https://sendbird.atlassian.net/browse/CLNP-6094) #### Changelog * Fixed the min-width of the messages in open channel [CLNP-6094]: https://sendbird.atlassian.net/browse/CLNP-6094?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent 1220982 commit 3c5399b

File tree

6 files changed

+16
-8
lines changed

6 files changed

+16
-8
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './open-channel-message.scss';
12
import React, { useState, useRef, ReactElement } from 'react';
23
import { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
34
import { User } from '@sendbird/chat';
@@ -8,7 +9,6 @@ import OpenChannelAdminMessage from '../../../../ui/OpenChannelAdminMessage';
89
import OpenChannelOGMessage from '../../../../ui/OpenchannelOGMessage';
910
import OpenChannelThumbnailMessage from '../../../../ui/OpenchannelThumbnailMessage';
1011
import OpenChannelFileMessage from '../../../../ui/OpenchannelFileMessage';
11-
// import UnknownMessage from '../../../../ui/UnknownMessage';
1212

1313
import DateSeparator from '../../../../ui/DateSeparator';
1414
import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
@@ -73,7 +73,7 @@ export default function OpenChannelMessage(
7373

7474
if (renderMessage) {
7575
return (
76-
<div className="sendbird-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
76+
<div className="sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
7777
{renderMessage({ message, chainTop, chainBottom })}
7878
</div>
7979
);
@@ -99,7 +99,7 @@ export default function OpenChannelMessage(
9999
}
100100

101101
return (
102-
<div className="sendbird-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
102+
<div className="sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref" data-testid="sendbird-message-hoc">
103103
<>
104104
{/* date-separator */}
105105
{hasSeparator && message?.createdAt && (
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.sendbird-open-channel-msg-hoc {
2+
min-width: 380px;
3+
}

src/ui/OpenchannelFileMessage/__tests__/__snapshots__/OpenchannelFileMessage.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ exports[`ui/OpenchannelFileMessage should do a snapshot test of the OpenchannelF
6868
tabindex="0"
6969
>
7070
<span
71-
class="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
71+
class="sendbird-openchannel-file-message__right__body__file-name__label sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
7272
>
7373
72b35fef-acda-4e32-...4-37e1226b0615.pdf
7474
</span>

src/ui/OpenchannelFileMessage/index.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
margin-top: 4px;
5757
margin-bottom: 4px;
5858
border-radius: 8px;
59+
max-width: 360px;
5960
@include themed() {
6061
background-color: t(bg-1);
6162
border: solid 1px t(on-bg-4);
@@ -79,8 +80,12 @@
7980
overflow: hidden;
8081
height: 20px;
8182
max-height: 20px;
82-
text-overflow: ellipsis;
83-
white-space: nowrap;
83+
84+
.sendbird-openchannel-file-message__right__body__file-name__label {
85+
overflow-x: hidden;
86+
text-overflow: ellipsis;
87+
white-space: nowrap;
88+
}
8489
}
8590
}
8691
}

src/ui/OpenchannelFileMessage/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ export default function OpenChannelFileMessage({
183183
onClick={openFileUrl}
184184
>
185185
<Label
186+
className="sendbird-openchannel-file-message__right__body__file-name__label"
186187
type={LabelTypography.BODY_1}
187188
color={LabelColors.ONBACKGROUND_1}
188189
>

src/ui/OpenchannelOGMessage/index.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,7 @@
103103
position: relative;
104104
display: inline-block;
105105
box-sizing: border-box;
106-
width: calc(100% - 64px);
107-
max-width: 360px;
106+
width: 360px;
108107
left: 64px;
109108
padding: 12px 12px 4px 12px;
110109
border-radius: 8px;

0 commit comments

Comments
 (0)