Code comments improvements (#15722)

- Right-align the Reply and Resolve buttons
- Center Resolved text and add some padding
- Add padding to inline comments
- Indent the comment content to align with author name
- Re-parent form to allow better button layout space.

Co-authored-by: zeripath <art27@cantab.net>

4 files changed, 20 insertions, 11 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 5249b88516..d7fa9c8b9b 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1175,7 +1175,7 @@ async function initRepository() {
       const form = $(e.currentTarget).closest('form');
       if (form.length > 0 && form.hasClass('comment-form')) {
         form.addClass('hide');
-        form.parent().find('button.comment-form-reply').show();
+        form.closest('.comment-code-cloud').find('button.comment-form-reply').show();
       } else {
         form.closest('.comment-code-cloud').remove();
       }
@@ -1339,7 +1339,7 @@ function initPullRequestReview() {
   $(document).on('click', 'button.comment-form-reply', function (e) {
     e.preventDefault();
     $(this).hide();
-    const form = $(this).parent().find('.comment-form');
+    const form = $(this).closest('.comment-code-cloud').find('.comment-form');
     form.removeClass('hide');
     const $textarea = form.find('textarea');
     let $simplemde;
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index d85f13cb33..0499547291 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -469,6 +469,10 @@ a.ui.card:hover,
   border-top-color: var(--color-secondary-light-1) !important;
 }
 
+.ui.comments .comment .text {
+  margin: 0;
+}
+
 .ui.comments .comment .text,
 .ui.comments .comment .author {
   color: var(--color-text);
@@ -1633,6 +1637,11 @@ a.ui.label:hover {
   border-color: var(--color-light-border);
 }
 
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+  background: var(--color-hover);
+}
+
 .ui.blue.button,
 .ui.blue.buttons .button,
 .ui.primary.button,
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 549bd4d7e5..c0b91451c6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1058,7 +1058,7 @@
 
       .code-comment {
         border: 1px solid transparent;
-        padding: .5rem 0;
+        padding: .25rem .5rem;
         margin: 0;
 
         .content {
@@ -1076,6 +1076,10 @@
           }
         }
 
+        .comment-content {
+          margin-left: 36px;
+        }
+
         .avatar.image {
           width: 28px;
           height: 28px;
@@ -1094,7 +1098,7 @@
         }
 
         button.comment-form-reply {
-          margin-left: 0;
+          margin: 0;
         }
       }
 
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 2b8700a745..9197050913 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -112,14 +112,10 @@
       display: block;
     }
   }
+}
 
-  button.comment-form-reply {
-    margin: .5em .5em .5em 4.5em;
-  }
-
-  form.comment-form-reply {
-    margin: 0 0 0 1em;
-  }
+.diff-file-body .comment-form {
+  margin: 0 0 0 3em;
 }
 
 .file-comment {