Skip to content
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

Jump to bottom

[CORL-1280] set max-width for username on mobile #3169

Merged
merged 2 commits into from Sep 2, 2020
Merged

[CORL-1280] set max-width for username on mobile #3169

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
63004b4
set max-width for username on mobile
tessalt Sep 2, 2020
8437366
Merge branch 'master' into bugfix/CORL-1280
kodiakhq[bot] Sep 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/core/client/stream/tabs/Comments/Comment/Comment.css
View file
Open in desktop
Expand Up @@ -40,4 +40,5 @@ $commentTimestampColor: var(--palette-grey-500);

.usernameFullRow {
flex-basis: 100%;
max-width: 190px;
}
7 changes: 7 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/CommentContainer.css
View file
Open in desktop
Expand Up @@ -63,3 +63,10 @@ $commenterActionEditColorActive: var(--palette-primary-300);
width: 100%;
height: 100%;
}

.usernameButton {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
max-width: 100%;
}
5 changes: 4 additions & 1 deletion src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
View file
Open in desktop
Expand Up @@ -381,7 +381,10 @@ export const CommentContainer: FunctionComponent<Props> = ({
username={
comment.author && (
<UsernameWithPopoverContainer
className={CLASSES.comment.topBar.username}
className={cn(
styles.usernameButton,
CLASSES.comment.topBar.username
)}
comment={comment}
viewer={viewer}
/>
Expand Down
14 changes: 7 additions & 7 deletions src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -280,7 +280,7 @@ exports[`hide reply button 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -609,7 +609,7 @@ exports[`renders body only 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -938,7 +938,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -1267,7 +1267,7 @@ exports[`renders disabled reply when story is closed 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -1617,7 +1617,7 @@ exports[`renders in reply to 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -1950,7 +1950,7 @@ exports[`renders username and body 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down Expand Up @@ -2294,7 +2294,7 @@ exports[`shows conversation link 1`] = `
}
username={
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
className="CommentContainer-usernameButton coral coral-username coral-comment-username"
comment={
Object {
"actionCounts": Object {
Expand Down
10 changes: 5 additions & 5 deletions src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -151,7 +151,7 @@ exports[`renders permalink view 1`] = `
>
<button
aria-controls="username-popover-comment-1"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -425,7 +425,7 @@ exports[`renders permalink view 1`] = `
>
<button
aria-controls="username-popover-comment-2"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -696,7 +696,7 @@ exports[`renders permalink view 1`] = `
>
<button
aria-controls="username-popover-comment-with-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -977,7 +977,7 @@ exports[`renders permalink view 1`] = `
>
<button
aria-controls="username-popover-comment-3"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1276,7 +1276,7 @@ exports[`renders permalink view 1`] = `
>
<button
aria-controls="username-popover-comment-4"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
10 changes: 5 additions & 5 deletions ...t/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@ exports[`renders conversation thread 1`] = `
>
<button
aria-controls="username-popover-comment-from-staff-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -383,7 +383,7 @@ exports[`renders conversation thread 1`] = `
>
<button
aria-controls="username-popover-comment-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -675,7 +675,7 @@ exports[`shows more of this conversation 1`] = `
>
<button
aria-controls="username-popover-comment-1"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -949,7 +949,7 @@ exports[`shows more of this conversation 1`] = `
>
<button
aria-controls="username-popover-comment-from-staff-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1233,7 +1233,7 @@ exports[`shows more of this conversation 1`] = `
>
<button
aria-controls="username-popover-comment-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
8 changes: 4 additions & 4 deletions src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ exports[`cancel edit 1`] = `
>
<button
aria-controls="username-popover-comment-with-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1003,7 +1003,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
>
<button
aria-controls="username-popover-comment-with-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1296,7 +1296,7 @@ exports[`edit a comment: server response 1`] = `
>
<button
aria-controls="username-popover-comment-with-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1598,7 +1598,7 @@ exports[`shows expiry message: edit form closed 1`] = `
>
<button
aria-controls="username-popover-comment-with-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@ exports[`renders comment stream with load more button 1`] = `
>
<button
aria-controls="username-popover-comment-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -335,7 +335,7 @@ exports[`renders comment stream with load more button 1`] = `
>
<button
aria-controls="username-popover-comment-1"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
2 changes: 1 addition & 1 deletion src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ exports[`post a comment: optimistic response 1`] = `
>
<button
aria-controls="username-popover-uuid-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
12 changes: 6 additions & 6 deletions src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ exports[`post a reply: open reply form 1`] = `
>
<button
aria-controls="username-popover-comment-with-deepest-replies-3"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -562,7 +562,7 @@ exports[`post a reply: optimistic response 1`] = `
>
<button
aria-controls="username-popover-uuid-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -870,7 +870,7 @@ exports[`renders comment stream 1`] = `
>
<button
aria-controls="username-popover-comment-with-deepest-replies"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1147,7 +1147,7 @@ exports[`renders comment stream 1`] = `
>
<button
aria-controls="username-popover-comment-with-deepest-replies-1"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1451,7 +1451,7 @@ exports[`renders comment stream 1`] = `
>
<button
aria-controls="username-popover-comment-with-deepest-replies-2"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1755,7 +1755,7 @@ exports[`renders comment stream 1`] = `
>
<button
aria-controls="username-popover-comment-with-deepest-replies-3"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ exports[`post a reply: open reply form 1`] = `
>
<button
aria-controls="username-popover-comment-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -519,7 +519,7 @@ exports[`post a reply: optimistic response 1`] = `
>
<button
aria-controls="username-popover-uuid-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions .../client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -376,7 +376,7 @@ exports[`renders comment stream with community guidelines 1`] = `
>
<button
aria-controls="username-popover-comment-0"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -648,7 +648,7 @@ exports[`renders comment stream with community guidelines 1`] = `
>
<button
aria-controls="username-popover-comment-1"
className="BaseButton-root coral coral-username coral-comment-username"
className="BaseButton-root CommentContainer-usernameButton coral coral-username coral-comment-username"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down