3 files changed, 35 insertions, 8 deletions
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index bd007196d4..039c471309 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1126,7 +1126,10 @@
         .comment-content {
           margin-left: 36px;
         }
+      }
 
+      .code-comment,
+      .comment {
         img.avatar {
           width: 28px;
           height: 28px;
@@ -3266,7 +3269,8 @@ td.blob-excerpt {
   background: var(--color-diff-inactive);
 }
 
-.code-diff-split tbody tr td:nth-child(5) {
+.code-diff-split tbody tr td:nth-child(5),
+.code-diff-split tbody tr td.add-comment-right {
   border-left: 1px solid var(--color-secondary);
 }
 
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 013d6d5aa1..4dd232945e 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -48,6 +48,12 @@
   }
 }
 
+.add-comment .lines-num,
+.add-comment .lines-escape,
+.add-comment .lines-type-marker {
+  display: none;
+}
+
 .show-outdated,
 .hide-outdated {
   &:extend(.unselectable);
@@ -59,11 +65,13 @@
 }
 
 .comment-code-cloud {
-  padding: .5rem !important;
+  padding: .5rem 1rem !important;
   position: relative;
   margin: 0 auto;
+  max-width: 1000px;
 
   @media @mediaSm {
+    max-width: auto;
     padding: .75rem !important;
 
     .code-comment-buttons {
@@ -73,13 +81,22 @@
         width: 100%;
       }
     }
+
+    .ui.buttons {
+      width: 100%;
+      margin: 0 !important;
+
+      .button {
+        flex: 1;
+      }
+    }
   }
 
   .comments .comment {
-    margin: 0;
+    padding: 0;
 
     @media @mediaSm {
-      padding: 0;
+      display: flex;
 
       .comment-header-right.actions .ui.basic.label {
         display: none;
@@ -90,6 +107,10 @@
         float: none;
         margin: 0 .5rem 0 0;
         flex-shrink: 0;
+
+        ~ .content {
+          margin-left: 1em;
+        }
       }
 
       img.avatar {
@@ -100,6 +121,10 @@
         margin-left: 0 !important;
       }
 
+      .comment-container {
+        width: 100%;
+      }
+
       &.code-comment {
         padding: 0 0 .5rem !important;
       }
@@ -166,10 +191,7 @@
     .button {
       width: 100%;
       margin: 0 !important;
-
-      &:not(:last-child) {
-        margin-bottom: .75rem !important;
-      }
+      margin-bottom: .75rem !important;
     }
   }
 }
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 19477f7ecd..f475693926 100644
--- a/web_src/less/helpers.less
+++ b/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; }
 }