reorganize comments template

src/client/styles/scss/_comment_growi.scss

@@ -32,11 +32,6 @@
     }
   }
 
-  .page-comments-row {
-    // offset margin left to apply bg-color
-    margin: 30px -15px 30px -15px;
-  }
-
   .page-comments {
     h4 {
       margin-bottom: 1em;

src/server/views/layout-growi/widget/comments.html

@@ -1,15 +1,17 @@
-<div class="page-comments-row row d-edit-none d-print-none">
+<div class="page-comments-row mt-5 py-4 d-edit-none d-print-none">
+  <div class="container">
 
-  <div class="page-comments col-lg-10 my-5">
+    <div class="page-comments">
 
-    <h2 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h2>
+      <h2 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h2>
 
-    <div class="page-comments-list" id="page-comments-list"></div>
+      <div class="page-comments-list" id="page-comments-list"></div>
 
-    {% if page and not page.isDeleted() %}
-    <div id="page-comment-write"></div>
-    {% endif %}
+      {% if page and not page.isDeleted() %}
+      <div id="page-comment-write"></div>
+      {% endif %}
 
-  </div>
+    </div>
 
+  </div>
 </div>