Merge pull request #1724 from weseek/support/bs4-fix-comment-appearance

Support/bs4 fix comment appearance

src/client/js/components/PageComment/Comment.jsx

@@ -108,8 +108,8 @@ class Comment extends React.PureComponent {
   }
 
   getRevisionLabelClassName() {
-    return `page-comment-revision label ${
-      this.isCurrentRevision() ? 'label-primary' : 'label-default'}`;
+    return `page-comment-revision badge ${
+      this.isCurrentRevision() ? 'badge-primary' : 'badge-default'}`;
   }
 
   editBtnClickedHandler() {

src/client/styles/scss/_comment.scss

@@ -1,21 +1,3 @@
-.main-container {
-  .page-comment-main {
-    pointer-events: auto;
-
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-    }
-
-    &:hover > .page-comment-control {
-      visibility: visible;
-    }
-  }
-}
-
 // modal
 .page-comment-delete-modal .modal-content {
   .modal-body {
@@ -59,4 +41,20 @@
       color: #999;
     }
   }
+
+  .page-comment-main {
+    pointer-events: auto;
+
+    // delete button
+    .page-comment-control {
+      position: absolute;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+    }
+
+    &:hover > .page-comment-control {
+      visibility: visible;
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 <div class="page-comments-row row hidden-print">
 
-  <div class="page-comments col-lg-7 col-md-9">
+  <div class="page-comments col-xl-7 col-lg-9">
 
     <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>