small adjustments on PageTree, Tag

packages/app/src/components/Sidebar/PageTree/ItemsTree.module.scss

@@ -1,4 +1,5 @@
 @use '~/styles/variables' as var;
+@use '~/styles/mixins' as *;
 $grw-sidebar-content-header-height: 58px;
 $grw-sidebar-content-footer-height: 50px;
 $grw-pagetree-item-padding-left: 10px;
@@ -6,14 +7,14 @@ $grw-pagetree-item-container-height: 40px;
 
 .grw-pagetree {
 
-  .grw-pagetree-item-skeleton {
-    width: 100%;
-    height: $grw-pagetree-item-container-height;
-    padding: (($grw-pagetree-item-container-height - 16px) / 2) $grw-pagetree-item-padding-left;
+  .grw-pagetree-item-skeleton-text {
+    @include grw-skeleton-text($font-size:16px, $line-height:$grw-pagetree-item-container-height);
+    padding-left: 12px;
   }
 
-  .grw-pagetree-item-skeleton-children {
-    padding-left: $grw-pagetree-item-padding-left * 2;
+  .grw-pagetree-item-skeleton-text-child {
+    @extend .grw-pagetree-item-skeleton-text;
+    padding-left: 12px + $grw-pagetree-item-padding-left;
   }
 
   :global {

packages/app/src/components/Sidebar/Skeleton/PageTreeContentSkeleton.tsx

@@ -8,9 +8,9 @@ const PageTreeContentSkeleton = (): JSX.Element => {
 
   return (
     <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`} >
-      <Skeleton additionalClass={styles['grw-pagetree-item-skeleton']} />
-      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton']} ${styles['grw-pagetree-item-skeleton-children']}`} />
-      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton']} ${styles['grw-pagetree-item-skeleton-children']}`} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text']} pr-3`} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pr-3`} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pr-3`} />
     </ul>
   );
 };

packages/app/src/components/Sidebar/Tag.module.scss

@@ -2,6 +2,7 @@
 
 .grw-tag-skeleton-h3 {
   @include grw-skeleton-h3;
+  max-width: 120px;
 }
 
 .grw-tag-list-skeleton {