overall style adjustments

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

@@ -8,7 +8,12 @@
 
   .grw-custom-sidebar-skeleton-text {
     @include grw-skeleton-text($font-size:15px, $line-height:21.42px);
-    max-width: 100%;
+    max-width: 160px;
     margin: 15px 0;
   }
+
+  .grw-custom-sidebar-skeleton-text-full {
+    @extend .grw-custom-sidebar-skeleton-text;
+    max-width: 100%;
+  }
 }

packages/app/src/components/Sidebar/CustomSidebar.tsx

@@ -21,7 +21,7 @@ const logger = loggerFactory('growi:cli:CustomSidebar');
 
 const SidebarNotFound = () => {
   return (
-    <div className="grw-sidebar-content-header h5 text-center p-3">
+    <div className="grw-sidebar-content-header h5 text-center py-3">
       <Link href="/Sidebar#edit">
         <a><i className="icon-magic-wand"></i> Create <strong>/Sidebar</strong> page</a>
       </Link>
@@ -43,8 +43,8 @@ const CustomSidebar: FC = () => {
   const markdown = (page?.revision as IRevision | undefined)?.body;
 
   return (
-    <>
-      <div className="grw-sidebar-content-header p-3 d-flex">
+    <div className="px-3">
+      <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">
           {t('CustomSidebar')}
           <Link href="/Sidebar"><a className="h6 ml-2"><i className="icon-pencil"></i></a></Link>
@@ -60,7 +60,7 @@ const CustomSidebar: FC = () => {
 
       {
         (!isLoading && markdown != null) && (
-          <div className={`p-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
+          <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
             <RevisionRenderer
               rendererOptions={rendererOptions}
               markdown={markdown}
@@ -74,7 +74,7 @@ const CustomSidebar: FC = () => {
           <SidebarNotFound />
         )
       }
-    </>
+    </div>
   );
 };
 

packages/app/src/components/Sidebar/PageTree.tsx

@@ -16,7 +16,7 @@ const PageTreeHeader = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="grw-sidebar-content-header p-3">
+    <div className="grw-sidebar-content-header py-3 d-flex">
       <h3 className="mb-0">{t('Page Tree')}</h3>
     </div>
   );
@@ -35,10 +35,10 @@ const PageTree: FC = memo(() => {
 
   if (migrationStatus == null) {
     return (
-      <>
+      <div className="px-3">
         <PageTreeHeader />
         <PageTreeContentSkeleton />
-      </>
+      </div>
     );
   }
 
@@ -46,13 +46,13 @@ const PageTree: FC = memo(() => {
     // TODO : improve design
     // Story : https://redmine.weseek.co.jp/issues/83755
     return (
-      <>
+      <div className="px-3">
         <PageTreeHeader />
         <div className="mt-5 mx-2 text-center">
           <h3 className="text-gray">{t('v5_page_migration.page_tree_not_avaliable')}</h3>
           <a href="/admin">{t('v5_page_migration.go_to_settings')}</a>
         </div>
-      </>
+      </div>
     );
   }
 
@@ -66,7 +66,7 @@ const PageTree: FC = memo(() => {
   const path = currentPath || '/';
 
   return (
-    <>
+    <div className="px-3">
       <PageTreeHeader />
       <ItemsTree
         isEnableActions={!isGuestUser}
@@ -76,13 +76,13 @@ const PageTree: FC = memo(() => {
       />
 
       {!isGuestUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
-        <div className="grw-pagetree-footer border-top p-3 w-100">
+        <div className="grw-pagetree-footer border-top py-3 w-100">
           <div className="private-legacy-pages-link px-3 py-2">
             <PrivateLegacyPagesLink />
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 });
 

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -274,7 +274,7 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
 
   if (initialItemNode != null) {
     return (
-      <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} ref={rootElemRef}>
+      <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`} ref={rootElemRef}>
         <Item
           key={initialItemNode.page.path}
           targetPathOrId={targetPathOrId}

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -160,8 +160,8 @@ const RecentChanges = (): JSX.Element => {
   }, [retrieveSizePreferenceFromLocalStorage]);
 
   return (
-    <div data-testid="grw-recent-changes">
-      <div className="grw-sidebar-content-header p-3 d-flex">
+    <div className="px-3" data-testid="grw-recent-changes">
+      <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0 text-nowrap">{t('Recent Changes')}</h3>
         <SidebarHeaderReloadButton onClick={() => mutate()}/>
         <div className="d-flex align-items-center">
@@ -180,7 +180,7 @@ const RecentChanges = (): JSX.Element => {
       </div>
       {
         isLoading ? <RecentChangesContentSkeleton /> : (
-          <div className="grw-recent-changes p-3">
+          <div className="grw-recent-changes py-3">
             <ul className="list-group list-group-flush">
               <InfiniteScroll
                 swrInifiniteResponse={swr}

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

@@ -7,8 +7,9 @@ import styles from '../CustomSidebar.module.scss';
 const CustomSidebarContentSkeleton = (): JSX.Element => {
 
   return (
-    <div className={`p-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']}`} />
+    <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text-full ${styles['grw-custom-sidebar-skeleton-text-full']}`} />
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text-full ${styles['grw-custom-sidebar-skeleton-text-full']}`} />
       <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']}`} />
     </div>
   );

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

@@ -7,7 +7,7 @@ import styles from '../PageTree/ItemsTree.module.scss';
 const PageTreeContentSkeleton = (): JSX.Element => {
 
   return (
-    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} >
+    <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']}`} />

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

@@ -27,7 +27,7 @@ const SkeletonItem = () => {
 const RecentChangesContentSkeleton = (): JSX.Element => {
 
   return (
-    <div className="grw-recent-changes p-3">
+    <div className="grw-recent-changes py-3">
       <ul className="list-group list-group-flush">
         <SkeletonItem />
         <SkeletonItem />

packages/app/src/components/Sidebar/Skeleton/SidebarSkeleton.module.scss

@@ -2,5 +2,5 @@
 
 .grw-sidebar-content-header-skeleton {
   @include grw-skeleton-h3;
-  max-width: 160px;
+  max-width: 100%;
 }

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

@@ -13,7 +13,7 @@ import styles from './SidebarSkeleton.module.scss';
 
 export const SidebarHeaderSkeleton = (): JSX.Element => {
   return (
-    <div className="grw-sidebar-content-header p-3">
+    <div className="grw-sidebar-content-header py-3">
       <Skeleton additionalClass={styles['grw-sidebar-content-header-skeleton']} />
     </div>
   );
@@ -29,22 +29,22 @@ export const SidebarSkeleton = (): JSX.Element => {
     case SidebarContentsType.TAG:
       SidebarContentSkeleton = TagContentSkeleton;
       break;
-    case SidebarContentsType.TREE:
-      SidebarContentSkeleton = PageTreeContentSkeleton;
-      break;
     case SidebarContentsType.RECENT:
       SidebarContentSkeleton = RecentChangesContentSkeleton;
       break;
     case SidebarContentsType.CUSTOM:
-    default:
       SidebarContentSkeleton = CustomSidebarContentSkeleton;
       break;
+    case SidebarContentsType.TREE:
+    default:
+      SidebarContentSkeleton = PageTreeContentSkeleton;
+      break;
   }
 
   return (
-    <>
+    <div className={currentSidebarContents === SidebarContentsType.TAG ? 'px-4' : 'px-3'}>
       <SidebarHeaderSkeleton />
       <SidebarContentSkeleton />
-    </>
+    </div>
   );
 };

packages/app/src/components/Skeleton.tsx

@@ -12,7 +12,7 @@ export const Skeleton = (props: SkeletonProps): JSX.Element => {
 
   return (
     <div className={`${additionalClass ?? ''}`}>
-      <div className={`grw-skeleton h-100 w-100 ${roundedPill ?? ''}`}></div>
+      <div className={`grw-skeleton h-100 w-100 ${roundedPill && 'rounded-pill'}`}></div>
     </div>
   );
 };