adjust height

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

@@ -4,10 +4,6 @@
 
 // display cheatsheet for comment form only
 .comment-editor-styles :global {
-  .cm-editor {
-    height: 300px !important;
-  }
-
   .comment-form {
     position: relative;
 
@@ -21,9 +17,18 @@
       @extend %picture;
     }
 
-    // textarea
-    .comment-form-preview {
-      padding-top: 0.5em;
-    }
+  }
+}
+
+
+// adjust height
+.comment-editor-styles :global {
+  .cm-gutters {
+    min-height: 300px !important;
+  }
+  .comment-preview-container {
+    min-height: page-editor-inheritance.$navbar-editor-height
+      + comment-inheritance.$codemirror-default-height;
+    padding-top: 0.5em;
   }
 }

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -338,7 +338,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
               />
             </TabPane>
             <TabPane tabId="comment_preview">
-              <div className="comment-form-preview">
+              <div className="comment-preview-container">
                 {commentPreview}
               </div>
             </TabPane>

apps/app/src/components/PageComment/CommentPreview.module.scss

@@ -1,9 +1,2 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-@use './comment-inheritance';
-@use '../PageEditor/page-editor-inheritance';
-
 .grw-comment-preview {
-  min-height: page-editor-inheritance.$navbar-editor-height
-    + comment-inheritance.$codemirror-default-height
-    + bs.$line-height-base;
 }

apps/app/src/components/PageComment/CommentPreview.tsx

@@ -5,6 +5,8 @@ import RevisionRenderer from '../Page/RevisionRenderer';
 
 import styles from './CommentPreview.module.scss';
 
+const moduleClass = styles['grw-comment-preview'] ?? '';
+
 
 type CommentPreviewPorps = {
   markdown: string,
@@ -21,7 +23,7 @@ export const CommentPreview = (props: CommentPreviewPorps): JSX.Element => {
   }
 
   return (
-    <div className={`grw-comment-preview ${styles['grw-comment-preview']}`}>
+    <div className={moduleClass}>
       <RevisionRenderer
         rendererOptions={rendererOptions}
         markdown={markdown}

apps/app/src/components/PageEditor/_page-editor-inheritance.scss

@@ -1 +1 @@
-$navbar-editor-height: 30px;
+$navbar-editor-height: 32.8px;