Skip to content

Commit 969ce2c

Browse files
chohongmchohongm
authored
fix: Fix broken file viewer title in mobile view (#1197)
Fixes [AC-3585](https://sendbird.atlassian.net/browse/AC-3585) ### Changelogs - Fixed broken file viewer title in mobile view ### Before <img width="1024" alt="Screenshot 2024-08-20 at 3 18 54 PM" src="https://github.com/user-attachments/assets/1d5360e0-c006-43de-a5dc-89e0513977ac"> <img width="448" alt="Screenshot 2024-08-20 at 3 19 17 PM" src="https://github.com/user-attachments/assets/f8d55378-5861-45dc-9930-0d4392147c40"> ### After <img width="1018" alt="Screenshot 2024-08-20 at 3 19 03 PM" src="https://github.com/user-attachments/assets/ac35ac21-4300-4c86-8308-932f3dd333ab"> <img width="437" alt="Screenshot 2024-08-20 at 3 19 31 PM" src="https://github.com/user-attachments/assets/3bc57826-8c55-4329-881c-1fbe6f5a2190"> [AC-3585]: https://sendbird.atlassian.net/browse/AC-3585?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent cbe660e commit 969ce2c

File tree

4 files changed

+90
-63
lines changed

4 files changed

+90
-63
lines changed

‎src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,14 @@ export const FileViewerComponent = ({
8585
<div className="sendbird-fileviewer__header__left__avatar">
8686
<Avatar height="32px" width="32px" src={profileUrl} />
8787
</div>
88-
<Label className="sendbird-fileviewer__header__left__filename" type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
89-
{name}
90-
</Label>
91-
<Label className="sendbird-fileviewer__header__left__sender-name" type={LabelTypography.BODY_1} color={LabelColors.ONBACKGROUND_2}>
92-
{nickname}
93-
</Label>
88+
<div className="sendbird-fileviewer__header__left__text-container">
89+
<Label className="sendbird-fileviewer__header__left__filename" type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
90+
{name}
91+
</Label>
92+
<Label className="sendbird-fileviewer__header__left__sender-name" type={LabelTypography.BODY_1} color={LabelColors.ONBACKGROUND_2}>
93+
{nickname}
94+
</Label>
95+
</div>
9496
</div>
9597
<div className="sendbird-fileviewer__header__right">
9698
{isSupportedFileView(type) && (

‎src/modules/GroupChannel/components/FileViewer/index.scss‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,37 +45,42 @@
4545
display: flex;
4646
flex-direction: row;
4747
align-items: center;
48-
height: 64px;
49-
padding: 16px 20px;
48+
padding: 0 20px;
5049
overflow: hidden;
5150

5251
.sendbird-fileviewer__header__left__avatar {
53-
margin-right: 8px;
54-
}
55-
56-
.sendbird-fileviewer__header__left__filename {
57-
max-width: 500px;
58-
white-space: nowrap;
59-
overflow: hidden;
60-
text-overflow: ellipsis;
61-
display: inline-block;
52+
display: flex;
53+
margin-inline-end: 8px;
6254
@include mobile() {
63-
position: absolute;
64-
left: 64px;
65-
top: 10px;
66-
display: block;
67-
max-width: calc(100vw - 240px);
55+
margin-inline-end: 12px;
6856
}
6957
}
70-
71-
.sendbird-fileviewer__header__left__sender-name {
72-
display: inline-block;
73-
margin-left: 8px;
74-
padding-top: 5px;
58+
59+
.sendbird-fileviewer__header__left__text-container {
60+
display: flex;
61+
flex-direction: row;
62+
align-items: flex-end;
7563
@include mobile() {
76-
position: absolute;
77-
left: 56px;
78-
top: 24px;
64+
flex-direction: column;
65+
align-items: unset;
66+
}
67+
.sendbird-fileviewer__header__left__filename {
68+
max-width: 500px;
69+
white-space: nowrap;
70+
overflow: hidden;
71+
text-overflow: ellipsis;
72+
display: inline-block;
73+
margin-inline-end: 8px;
74+
padding-top: 3px;
75+
@include mobile() {
76+
display: block;
77+
max-width: calc(100vw - 240px);
78+
padding-top: 0;
79+
margin-inline-end: 0;
80+
}
81+
}
82+
.sendbird-fileviewer__header__left__sender-name {
83+
line-height: 1.1;
7984
}
8085
}
8186
}

‎src/ui/FileViewer/index.scss‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,25 +44,43 @@ $file-viewer-img-max-width: calc(100% - #{$file-viewer-slide-buttons-side-length
4444
display: flex;
4545
flex-direction: row;
4646
align-items: center;
47-
height: 64px;
48-
padding: 16px 20px;
49-
47+
padding: 0 20px;
48+
overflow: hidden;
49+
5050
.sendbird-fileviewer__header__left__avatar {
51-
margin-right: 8px;
52-
}
53-
54-
.sendbird-fileviewer__header__left__filename {
55-
max-width: 500px;
56-
white-space: nowrap;
57-
overflow: hidden;
58-
text-overflow: ellipsis;
59-
display: inline-block;
51+
display: flex;
52+
margin-inline-end: 8px;
53+
@include mobile() {
54+
margin-inline-end: 12px;
55+
}
6056
}
61-
62-
.sendbird-fileviewer__header__left__sender-name {
63-
display: inline-block;
64-
margin-left: 8px;
65-
padding-top: 5px;
57+
58+
.sendbird-fileviewer__header__left__text-container {
59+
display: flex;
60+
flex-direction: row;
61+
align-items: flex-end;
62+
@include mobile() {
63+
flex-direction: column;
64+
align-items: unset;
65+
}
66+
.sendbird-fileviewer__header__left__filename {
67+
max-width: 500px;
68+
white-space: nowrap;
69+
overflow: hidden;
70+
text-overflow: ellipsis;
71+
display: inline-block;
72+
margin-inline-end: 8px;
73+
padding-top: 3px;
74+
@include mobile() {
75+
display: block;
76+
max-width: calc(100vw - 240px);
77+
padding-top: 0;
78+
margin-inline-end: 0;
79+
}
80+
}
81+
.sendbird-fileviewer__header__left__sender-name {
82+
line-height: 1.1;
83+
}
6684
}
6785
}
6886

‎src/ui/FileViewer/index.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,29 +51,31 @@ export const FileViewerComponent = (props: FileViewerComponentProps): ReactEleme
5151
<div className="sendbird-fileviewer__header">
5252
<div className="sendbird-fileviewer__header__left">
5353
<div className="sendbird-fileviewer__header__left__avatar">
54-
<Avatar height="32px" width="32px" src={profileUrl} />
54+
<Avatar height="32px" width="32px" src={profileUrl}/>
55+
</div>
56+
<div className="sendbird-fileviewer__header__left__text-container">
57+
<Label
58+
className="sendbird-fileviewer__header__left__filename"
59+
type={LabelTypography.H_2}
60+
color={LabelColors.ONBACKGROUND_1}
61+
>
62+
{name}
63+
</Label>
64+
<Label
65+
className="sendbird-fileviewer__header__left__sender-name"
66+
type={LabelTypography.BODY_1}
67+
color={LabelColors.ONBACKGROUND_2}
68+
>
69+
{nickname}
70+
</Label>
5571
</div>
56-
<Label
57-
className="sendbird-fileviewer__header__left__filename"
58-
type={LabelTypography.H_2}
59-
color={LabelColors.ONBACKGROUND_1}
60-
>
61-
{name}
62-
</Label>
63-
<Label
64-
className="sendbird-fileviewer__header__left__sender-name"
65-
type={LabelTypography.BODY_1}
66-
color={LabelColors.ONBACKGROUND_2}
67-
>
68-
{nickname}
69-
</Label>
7072
</div>
7173
<div
7274
className="sendbird-fileviewer__header__right"
7375
>
7476
{
7577
isSupportedFileView(type) && (
76-
<div className="sendbird-fileviewer__header__right__actions" >
78+
<div className="sendbird-fileviewer__header__right__actions">
7779
<a
7880
className="sendbird-fileviewer__header__right__actions__download"
7981
rel="noopener noreferrer"

0 commit comments

Comments
 (0)