improve layout

apps/app/src/components/Layout/PageViewLayout.tsx

@@ -21,11 +21,11 @@ export const PageViewLayout = (props: Props): JSX.Element => {
           { headerContents != null && headerContents }
           { sideContents != null
             ? (
-              <div className="d-flex flex-column flex-column-reverse flex-lg-row">
+              <div className="d-flex gap-3">
                 <div className="flex-grow-1 flex-basis-0 mw-0">
                   {children}
                 </div>
-                <div className="grw-side-contents-container d-edit-none" data-vrt-blackout-side-contents>
+                <div className="grw-side-contents-container col-lg-3  d-edit-none" data-vrt-blackout-side-contents>
                   <div className="grw-side-contents-sticky-container">
                     {sideContents}
                   </div>

apps/app/src/components/PageSideContents/PageAccessoriesControl.module.scss

@@ -0,0 +1,30 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.btn-page-accessories :global {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+
+  .grw-labels {
+    flex-grow: 1;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+// smaller than lg
+@include bs.media-breakpoint-down(md) {
+  .btn-page-accessories :global {
+    .material-symbols-outlined {
+      font-size: 2em;
+    }
+  }
+}
+
+// larger than lg
+@include bs.media-breakpoint-up(md) {
+  .btn-page-accessories :global {
+    flex-grow: 1;
+    padding: 1px 5px 1px 10px;
+  }
+}

apps/app/src/components/PageSideContents/PageAccessoriesControl.tsx

@@ -0,0 +1,42 @@
+import { type ReactNode, memo } from 'react';
+
+import CountBadge from '../Common/CountBadge';
+
+
+import styles from './PageAccessoriesControl.module.scss';
+
+const moduleClass = styles['btn-page-accessories'];
+
+
+type Props = {
+  className?: string,
+  icon: ReactNode,
+  label: ReactNode,
+  count?: number,
+  onClick?: () => void,
+}
+
+export const PageAccessoriesControl = memo((props: Props): JSX.Element => {
+  const {
+    icon, label, count,
+    className,
+    onClick,
+  } = props;
+
+  return (
+    <button
+      type="button"
+      className={`btn btn-sm btn-outline-secondary ${moduleClass} ${className} rounded-pill`}
+      onClick={onClick}
+    >
+      <span className="grw-icon d-flex">{icon}</span>
+      <span className="grw-labels ms-1 d-none d-md-flex">
+        {label}
+        {/* Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600 */}
+        { count != null
+          ? <CountBadge count={count} offset={1} />
+          : <div className="px-2"></div>}
+      </span>
+    </button>
+  );
+});

apps/app/src/components/PageSideContents/PageSideContents.module.scss

@@ -1,5 +1,2 @@
-@use '~/styles/molecules/page-accessories-control';
-
-.grw-page-accessories-control :global {
-  @extend %grw-page-accessories-control;
+.grw-page-accessories-controls :global {
 }

apps/app/src/components/PageSideContents/PageSideContents.tsx

@@ -4,7 +4,7 @@ import { getIdForRef, type IPageHasId, type IPageInfoForOperation } from '@growi
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
-import { Link } from 'react-scroll';
+import { scroller } from 'react-scroll';
 
 import { useUpdateStateAfterSave } from '~/client/services/page-operation';
 import { apiPost } from '~/client/util/apiv1-client';
@@ -21,6 +21,7 @@ import { PageTagsSkeleton } from '../PageTags';
 import TableOfContents from '../TableOfContents';
 
 import styles from './PageSideContents.module.scss';
+import { PageAccessoriesControl } from './PageAccessoriesControl';
 
 
 const { isTopPage, isUsersHomepage, isTrashPage } = pagePathUtils;
@@ -104,48 +105,32 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
       {/* Tags */}
       <Tags pageId={page._id} revisionId={getIdForRef(page.revision)} />
 
-      {/* Page list */}
-      <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']} d-print-none`}>
+      <div className={`${styles['grw-page-accessories-controls']} d-flex flex-column gap-2 d-print-none`}>
+        {/* Page list */}
         {!isSharedUser && (
-          <button
-            type="button"
-            className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
-            onClick={() => openDescendantPageListModal(pagePath)}
-            data-testid="pageListButton"
-          >
-            <div className="grw-page-accessories-control-icon">
-              <PageListIcon />
-            </div>
-            {t('page_list')}
-
-            {/* Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600 */}
-            { !isTrash && pageInfo != null
-              ? <CountBadge count={(pageInfo as IPageInfoForOperation).descendantCount} offset={1} />
-              : <div className="px-2"></div>}
-          </button>
+          <div className="d-flex" data-testid="pageListButton">
+            <PageAccessoriesControl
+              icon={<span className="material-symbols-outlined">subject</span>}
+              label={t('page_list')}
+              // Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600
+              count={ !isTrash && pageInfo != null ? (pageInfo as IPageInfoForOperation).descendantCount : undefined }
+              onClick={() => openDescendantPageListModal(pagePath)} />
+          </div>
+        )}
+
+        {/* Comments */}
+        {!isTopPagePath && (
+          <div className="d-flex" data-testid="page-comment-button">
+            <PageAccessoriesControl
+              icon={<span className="material-symbols-outlined">chat</span>}
+              label="Comments"
+              count={ pageInfo != null ? (pageInfo as IPageInfoForOperation).commentCount : undefined }
+              onClick={() => scroller.scrollTo('comments-container', { smooth: false, offset: -120 })} />
+          </div>
         )}
       </div>
 
-      {/* Comments */}
-      {!isTopPagePath && (
-        <div className={`mt-2 grw-page-accessories-control ${styles['grw-page-accessories-control']} d-print-none`}>
-          <Link to="page-comments" offset={-120}>
-            <button
-              type="button"
-              className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
-              data-testid="page-comment-button"
-            >
-              <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>
-              <span>Comments</span>
-              { pageInfo != null
-                ? <CountBadge count={(pageInfo as IPageInfoForOperation).commentCount} />
-                : <div className="px-2"></div>}
-            </button>
-          </Link>
-        </div>
-      )}
-
-      <div className="d-none d-lg-block">
+      <div className="d-none d-xl-block">
         <TableOfContents />
         {isUsersHomepagePath && <ContentLinkButtons author={page?.creator} />}
       </div>

apps/app/src/styles/molecules/_page-accessories-control.scss

@@ -1,16 +0,0 @@
-%grw-page-accessories-control {
-  .grw-btn-page-accessories {
-    padding-right: 1rem;
-    padding-left: 1rem;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-  .grw-page-accessories-control-icon {
-    display: flex;
-    justify-content: center;
-    width: 20px;
-  }
-}