From e5d2031828d40b07deb1eb69cbd6bc2c75b13112 Mon Sep 17 00:00:00 2001 From: Gusted Date: Mon, 15 Aug 2022 11:09:46 +0000 Subject: [PATCH] Improve comment header for mobile (#20781) (#20789) - 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 --- web_src/less/_repository.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 0ad937f028..db77bafbbc 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3428,4 +3428,16 @@ td.blob-excerpt { } } } + + .comment-header { + flex-wrap: wrap; + + .comment-header-left { + flex-wrap: wrap; + } + + .comment-header-right { + margin-left: auto; + } + } }