clean code

packages/app/src/components/PageComment/Comment.module.scss

@@ -1,20 +1,6 @@
 @use '../../styles/bootstrap/init' as bs;
 @use './_comment-inheritance';
 
-// TODO: Never use this class. From "../../styles/_comment.scss"
-// pointer-events moved to .page-commnet
-.page-comments {
-  // .page-comments-list-toggle-older {
-  //   display: inline-block;
-  //   font-size: 0.9em;
-  // }
-  // .page-comment {
-  //   padding-top: 50px;
-  //   margin-top: -50px;
-  //   pointer-events: none;
-  // }
-}
-
 .comment-styles :global {
   .page-comment-writer {
     @include bs.media-breakpoint-down(xs) {

packages/app/src/components/PageComment/CommentControl.tsx

@@ -9,6 +9,7 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
   const { onClickEditBtn, onClickDeleteBtn } = props;
 
   return (
+    // The page-comment-control is imported from Comment.module.scss
     <div className="page-comment-control">
       <button type="button" className="btn btn-link p-2" onClick={onClickEditBtn}>
         <i className="ti ti-pencil"></i>

packages/app/src/components/PageComment/CommentEditor.module.scss

@@ -4,11 +4,6 @@
 // display cheatsheet for comment form only
 .comment-editor-styles :global {
   .comment-form {
-    // TODO: Never use this class. From "../../styles/_comment_growi.scss"
-    // .editor-cheatsheet {
-    //   display: none;
-    // }
-
     position: relative;
     margin-top: 1em;
 
@@ -30,15 +25,6 @@
     .comment-write {
       margin-bottom: 0.5em;
     }
-    // TODO: Never use this class. From "../../styles/_comment_growi.scss"
-    // .comment-form-comment {
-    //   height: 80px;
-    //   &:focus,
-    //   &:not(:invalid) {
-    //     height: 180px;
-    //     transition: height 0.2s ease-out;
-    //   }
-    // }
     .comment-form-preview {
       padding-top: 0.5em;
     }

packages/app/src/styles/_comment.scss

@@ -8,3 +8,20 @@
     }
   }
 }
+
+
+.page-comments {
+  // TODO: Never use this class.
+  .page-comments-list-toggle-older {
+    display: inline-block;
+    font-size: 0.9em;
+  }
+  // TODO: "pointer-events: none;" moved to "Comment.module.scss" now.
+  // .page-comment was defined in _comment.scss and _comment_growi.scss
+  // Required if .page-comment is not under .growi but under .page-comments, or under .growi but not under .page-comments
+  .page-comment {
+    padding-top: 50px;
+    margin-top: -50px;
+    pointer-events: none;
+  }
+}

packages/app/src/styles/_comment_growi.scss

@@ -0,0 +1,20 @@
+.growi {
+  // TODO: Never use these classes.
+
+  // display cheatsheet for comment form only
+  .comment-form {
+    .editor-cheatsheet {
+      display: none;
+    }
+
+    // textarea
+    .comment-form-comment {
+      height: 80px;
+      &:focus,
+      &:not(:invalid) {
+        height: 180px;
+        transition: height 0.2s ease-out;
+      }
+    }
+  }
+}