Fix comment box styling and cancelling (#11463) (#11464) (#11469) (#11467)

* Fix styling of resolved code comment box (#11463)

Co-authored-by: Lauris BH <lauris@nix.lv>

* Fix .comment-code-cloud not being removed when cancelling new code comment (#11464)

* Fix footer padding for comment code reply form on issue event view (#11469)

Co-authored-by: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>

templates/repo/diff/comment_form.tmpl

@@ -2,7 +2,7 @@
 	{{if $.hidden}}
 		<button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
 	{{end}}
-	<form class="ui form {{if $.hidden}}hide{{end}} comment-form comment-form-reply" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
+	<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
 	{{$.root.CsrfTokenHtml}}
 		<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/>
 		<input type="hidden" name="side" value="{{if $.Side}}{{$.Side}}{{end}}">

web_src/less/_repository.less

@@ -807,6 +807,10 @@
                 .author {
                     font-weight: 700;
                 }
+
+                .comment-form-reply .footer {
+                    padding-bottom: 1em;
+                }
             }
 
             .comment {

web_src/less/_review.less

@@ -17,6 +17,12 @@
     }
 }
 
+.add-comment-left.add-comment-right .ui.attached.header {
+    border: 1px solid #d4d4d5;
+    margin-bottom: .5em;
+    margin-top: .5em;
+}
+
 .focus-lines-new .ui.button.add-code-comment.add-code-comment-right,
 .focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
     opacity: 1;