Skip to content

Commit

Permalink
Improve comment header for mobile (#20781) (#20789)
Browse files Browse the repository at this point in the history
- Backport #20781
  - Since b9e8fa5 the avatar will be inlined into the comment header, so there's more room for the actual comment container(thus more text per line in the comment body). However this didn't take into consideration that the flex didn't allow any wrapping and thus was shrinking the avatar. Well this isn't a perfect solution, as you ideally all want these elements to be individually wrapped(such that comment-header-right can be on the same line as comment-header-left, which now causes a new line in certain situations). It's a better solution than the current CSS and to not mess with the desktop CSS/HTML.

Co-authored-by: Lunny Xiao <[email protected]>
  • Loading branch information
Gusted and lunny authored Aug 15, 2022
1 parent c3b4f3f commit e5d2031
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions web_src/less/_repository.less
Original file line number Diff line number Diff line change
Expand Up @@ -3428,4 +3428,16 @@ td.blob-excerpt {
}
}
}

.comment-header {
flex-wrap: wrap;

.comment-header-left {
flex-wrap: wrap;
}

.comment-header-right {
margin-left: auto;
}
}
}

0 comments on commit e5d2031

Please sign in to comment.