Improve code comment review on mobile

- Fix placement of avatar image, this was not placed in the
`comment-header-left` and add CSS to cover the limiting of width+height of avatar for
code-review comment on "Files changed" page. This fixes the big
noticeable avatar issue.
- Apply `margin-bottom` to the "next" button, so it's consistent with
the "previous" button.
- Make sure the "next"/"previous" start at `flex-start` on mobile and
not off-screen at `flex-end`.
- Add `flex: 1` to the text, so the browser will nicely wrap the "XXX
commented XXX ago" text besides the avatar and make the header a bit
more compact, still not ideal.
- Resolves #20074

Author: Gusted

templates/repo/diff/comments.tmpl

@@ -2,15 +2,11 @@
 
 {{$createdStr:= TimeSinceUnix .CreatedUnix $.root.locale}}
 <div class="comment" id="{{.HashTag}}">
-	{{if .OriginalAuthor}}
-		<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
-	{{else}}
-		{{template "shared/user/avatarlink" .Poster}}
-	{{end}}
 	<div class="content comment-container">
 		<div class="ui top attached header comment-header df ac sb">
 			<div class="comment-header-left df ac">
 				{{if .OriginalAuthor}}
+					<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
 					<span class="text black mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
@@ -24,6 +20,7 @@
 						{{end}}
 					</span>
 				{{else}}
+					{{template "shared/user/avatarlink" .Poster}}
 					<span class="text grey">
 						{{template "shared/user/namelink" .Poster}}
 						{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}

templates/repo/diff/conversation.tmpl

@@ -26,7 +26,7 @@
 				{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
 			</ui>
 		</div>
-		<div class="df je ac fw mt-3">
+		<div class="df je js-small ac fw mt-3">
 			<div class="ui buttons mr-2">
 				<button class="ui icon tiny basic button previous-conversation">
 					{{svg "octicon-arrow-up" 12 "icon"}} {{$.locale.Tr "repo.issues.previous"}}

web_src/less/_repository.less

@@ -1126,7 +1126,10 @@
         .comment-content {
           margin-left: 36px;
         }
+      }
 
+      .code-comment,
+      .comment {
         img.avatar {
           width: 28px;
           height: 28px;

web_src/less/_review.less

@@ -166,10 +166,7 @@
     .button {
       width: 100%;
       margin: 0 !important;
-
-      &:not(:last-child) {
-        margin-bottom: .75rem !important;
-      }
+      margin-bottom: .75rem !important;
     }
   }
 }
@@ -295,3 +292,9 @@ a.blob-excerpt:hover {
   width: 72px;
   height: 10px;
 }
+
+@media @mediaSm {
+  .comment-code-cloud .ui.comments .comment .text {
+    flex: 1;
+  }
+}

web_src/less/helpers.less

@@ -175,4 +175,5 @@
 @media @mediaSm {
   .db-small { display: block !important; }
   .w-100-small { width: 100% !important; }
+  .js-small { justify-content: flex-start !important; }
 }