Skip to content

fix: Set the message list padding with 12px in the mobile layout #1068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 19, 2024
Merged

fix: Set the message list padding with 12px in the mobile layout #1068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
206efd6
use 12px padding in mobile mode
HoonBaek Apr 19, 2024
9dfebdf
set message input padding to 16 in mobile
HoonBaek Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/modules/GroupChannel/components/MessageInputWrapper/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@
position: relative;
width: 100%;
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px;
padding: 0px 24px;
@include mobile() {
padding: 0px 16px;
}
}
}

Expand Down
6 changes: 4 additions & 2 deletions src/modules/GroupChannel/components/MessageList/index.scss
View file
Open in desktop
Copy link
Contributor

@bang9 bang9 Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원래 모바일 패딩이 12px 였는데, 24로 나오는 버그인건가요?

Copy link
Contributor Author

@HoonBaek HoonBaek Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

새로 발생한 이슈는 아니고요, 지금까지는 24px로 설정해 오고 있었는데 디자인을 보니 12px로 되어 있어서 수정했습니다.

Copy link
Contributor

@bang9 bang9 Apr 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어엇.. 그럼 혹시 TextInput 여백은 24 그대로이던가요?

Copy link
Contributor

@bang9 bang9 Apr 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

레이아웃이 자연스러워 보이지는 않아서요, 만약 변경할거면 여백이 들어가는 컴포넌트들 전체 확인이 필요할 것 같습니다.

Copy link
Contributor Author

@HoonBaek HoonBaek Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

엇.. 모바일에서 MessgeInput도 24가 아니라 16으로 되어있네요, 이것도 수정했습니다!

Copy link
Contributor

@bang9 bang9 Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

작업할때 조금이라도 이상한 부분들은 디테일 체크를 해서, 영향 줄수있는 부분들은 모두 체크하고 넘어가는게 좋습니다.

Copy link
Contributor Author

@HoonBaek HoonBaek Apr 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Message Edit Input 정도가 있을 것 같은데요, 이건 괜찮아 보입니다
image

Copy link
Contributor

@bang9 bang9 Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

voice message input 도 좌우여백 24로 보이는데요, 요쪽은 어떤가요?

Copy link
Contributor Author

@HoonBaek HoonBaek Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

voice message input의 경우에는 Desktop, mobile 모두 동일한 24px로 디자인이 되어 있습니다!

Copy link
Contributor

@bang9 bang9 Apr 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll to bottom 버튼도 확인 한번만 부탁드려욤~

12인 경우

image

24인 경우

image

Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@
position: relative;
height: 100%;
overflow-x: hidden;
padding-left: 24px;
padding-right: 24px;
padding: 0px 24px;
@include mobile() {
padding: 0px 12px;
}
}
.sendbird-separator,
.sendbird-admin-message {
Expand Down