update PageComment.tsx

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

@@ -1,3 +1,5 @@
+@use '~/styles/bootstrap/init' as bs;
+
 .page-comment-styles :global {
   .page-comments {
     h4 {
@@ -18,6 +20,9 @@
   height: 66px;
   padding: 1em;
   margin-left: 4.5em;
+  @include bs.media-breakpoint-down(xs) {
+    margin-left: 3.5em;
+  }
 }
 
 .page-comment-replycomments-body-skelton :global{
@@ -33,3 +38,13 @@
   margin-top: 0.5em;
   border: none;
 }
+
+.page-comment-commenteditorlazyrenderer-body-skelton :global {
+  position: relative;
+  height: 72.25px;
+  padding: 1em;
+  margin-left: 4.5em;
+  @include bs.media-breakpoint-down(xs) {
+    margin-left: 3.5em;
+  }
+}

packages/app/src/components/PageComment.tsx

@@ -142,7 +142,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
           <div className="container-lg">
             <div className="page-comments">
               <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
-              <div className="page-comments-list" id="page-comments-list">
+              {/* <div className="page-comments-list" id="page-comments-list">
                 <div className={`${CommentStyles['comment-styles']} page-comment-thread pb-5  page-comment-thread-no-replies`}>
                   <div className='page-comment flex-column'>
                     <div className='page-commnet-writer'>
@@ -160,13 +160,13 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
                     <Skelton additionalClass={`${styles['page-comment-button-skelton']} btn btn-outline-secondary btn-sm grw-skelton`} />
                   </div>
                 </div>
-              </div>
+              </div> */}
               <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
                 <div className='comment-form'>
                   <div className='comment-form-user'>
                     <Skelton additionalClass='rounded-circle picture' roundedPill />
                   </div>
-                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
+                  <Skelton additionalClass={`${styles['page-comment-commenteditorlazyrenderer-body-skelton']} grw-skelton`} />
                 </div>
               </div>
             </div>