adjust side contents layout

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

@@ -12,8 +12,8 @@
   }
 }
 
-// smaller than lg
-@include bs.media-breakpoint-down(md) {
+// apply larger font when smaller than lg
+@include bs.media-breakpoint-down(lg) {
   .btn-page-accessories :global {
     .material-symbols-outlined {
       font-size: 2em;
@@ -21,8 +21,8 @@
   }
 }
 
-// larger than lg
-@include bs.media-breakpoint-up(md) {
+// expand when larger than lg
+@include bs.media-breakpoint-up(lg) {
   .btn-page-accessories :global {
     flex-grow: 1;
     padding: 1px 5px 1px 10px;

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

@@ -30,7 +30,7 @@ export const PageAccessoriesControl = memo((props: Props): JSX.Element => {
       onClick={onClick}
     >
       <span className="grw-icon d-flex">{icon}</span>
-      <span className="grw-labels ms-1 d-none d-md-flex">
+      <span className="grw-labels ms-1 d-none d-lg-flex">
         {label}
         {/* Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600 */}
         { count != null

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

@@ -14,15 +14,14 @@ import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxPageInfo, useSWRxTagsInfo } from '~/stores/page';
 import { useIsAbleToShowTagLabel } from '~/stores/ui';
 
-import CountBadge from '../Common/CountBadge';
 import { ContentLinkButtons } from '../ContentLinkButtons';
-import PageListIcon from '../Icons/PageListIcon';
 import { PageTagsSkeleton } from '../PageTags';
 import TableOfContents from '../TableOfContents';
 
-import styles from './PageSideContents.module.scss';
 import { PageAccessoriesControl } from './PageAccessoriesControl';
 
+import styles from './PageSideContents.module.scss';
+
 
 const { isTopPage, isUsersHomepage, isTrashPage } = pagePathUtils;
 
@@ -113,8 +112,9 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
               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)} />
+              count={!isTrash && pageInfo != null ? (pageInfo as IPageInfoForOperation).descendantCount : undefined}
+              onClick={() => openDescendantPageListModal(pagePath)}
+            />
           </div>
         )}
 
@@ -124,8 +124,9 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             <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 })} />
+              count={pageInfo != null ? (pageInfo as IPageInfoForOperation).commentCount : undefined}
+              onClick={() => scroller.scrollTo('comments-container', { smooth: false, offset: -120 })}
+            />
           </div>
         )}
       </div>