Keep "speech bubble" effect

Author: Gusted

templates/repo/diff/comments.tmpl

@@ -2,11 +2,15 @@
 
 {{$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}}
@@ -20,7 +24,6 @@
 						{{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}}

web_src/less/_review.less

@@ -73,13 +73,22 @@
         width: 100%;
       }
     }
+
+    .ui.buttons {
+      width: 100%;
+
+      .button {
+        flex: 1;
+      }
+    }
   }
 
   .comments .comment {
     margin: 0;
 
     @media @mediaSm {
       padding: 0;
+      display: flex;
 
       .comment-header-right.actions .ui.basic.label {
         display: none;
@@ -90,6 +99,10 @@
         float: none;
         margin: 0 .5rem 0 0;
         flex-shrink: 0;
+
+        ~ .content {
+          margin-left: 1em;
+        }
       }
 
       img.avatar {
@@ -292,9 +305,3 @@ a.blob-excerpt:hover {
   width: 72px;
   height: 10px;
 }
-
-@media @mediaSm {
-  .comment-code-cloud .ui.comments .comment .text {
-    flex: 1;
-  }
-}