margin fixed

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

@@ -200,7 +200,7 @@ class Comment extends React.PureComponent {
             <div className="page-comment-writer">
               <UserPicture user={creator} />
             </div>
-            <div className="page-comment-main ml-0">
+            <div className="page-comment-main">
               <div className="page-comment-creator">
                 <Username user={creator} />
               </div>

src/client/styles/scss/_comment_growi.scss

@@ -2,11 +2,6 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 3.5em;
-    }
 
     // speech balloon
     &:before {
@@ -75,7 +70,7 @@
     .page-comment-main {
       @extend %comment-section;
       @include media-breakpoint-up(sm) {
-        margin-left: 4.5em !important;
+        margin-left: 4.5em;
       }
       @include media-breakpoint-down(xs) {
         &:before {
@@ -129,6 +124,10 @@
     // seciton
     .comment-form-main {
       @extend %comment-section;
+      margin-left: 4.5em;
+      @include media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
     }
 
     // textarea

src/client/styles/scss/_comment_kibela.scss

@@ -3,11 +3,6 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 3.5em;
-    }
 
     // speech balloon
     &:before {
@@ -69,7 +64,7 @@
     // コメントセクション
     .page-comment-main {
       @extend %comment-section;
-      margin-left: 4.5em !important;
+      margin-left: 4.5em;
       background: #e6e9ec;
       border-radius: 0.35em;
     }
@@ -124,6 +119,10 @@
     // seciton
     .comment-form-main {
       @extend %comment-section;
+      margin-left: 4.5em;
+      @include media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
       background: #e6e9ec;
       border-radius: 0.35em;
       .CodeMirror {