Merge pull request #7097 from weseek/imprv/apply-get-layout-to-page

imprv: Apply getLayout to page

packages/app/src/client/services/use-current-layout-class-name.ts → packages/app/src/client/services/layout.ts

@@ -2,12 +2,25 @@ import { useIsContainerFluid, useShareLinkId } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useEditorMode } from '~/stores/ui';
 
-export const useCurrentLayoutClassName = (): string => {
+export const useEditorModeClassName = (): string => {
+  const { getClassNamesByEditorMode } = useEditorMode();
+
+  // TODO: Enable `editing-sidebar` class somehow
+  // https://redmine.weseek.co.jp/issues/111527
+  // const classNames: string[] = [];
+  // if (currentPage != null) {
+  //   const isSidebar = currentPage.path === '/Sidebar';
+  //   classNames.push(...getClassNamesByEditorMode(/* isSidebar */));
+  // }
+
+  return `${getClassNamesByEditorMode().join(' ') ?? ''}`;
+};
+
+export const useCurrentGrowiLayoutFluidClassName = (): string => {
   const { data: shareLinkId } = useShareLinkId();
   const { data: currentPage } = useSWRxCurrentPage(shareLinkId ?? undefined);
 
   const { data: dataIsContainerFluid } = useIsContainerFluid();
-  const { getClassNamesByEditorMode } = useEditorMode();
 
   const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
     ? null
@@ -15,13 +28,5 @@ export const useCurrentLayoutClassName = (): string => {
   const isContainerFluidDefault = dataIsContainerFluid;
   const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
 
-  const classNames: string[] = [];
-  if (currentPage != null) {
-    const isSidebar = currentPage.path === '/Sidebar';
-    classNames.push(...getClassNamesByEditorMode(isSidebar));
-  }
-
-  const myClassName = `${classNames.join(' ') ?? ''} ${isContainerFluid ? 'growi-layout-fluid' : ''}`;
-
-  return myClassName;
+  return isContainerFluid ? 'growi-layout-fluid' : '';
 };

packages/app/src/components/Layout/BasicLayout.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import { useCurrentLayoutClassName } from '../../client/services/use-current-layout-class-name';
+import { useEditorModeClassName } from '../../client/services/layout';
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 import Sidebar from '../Sidebar';
 
@@ -69,8 +69,8 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   );
 };
 
-export const BasicLayoutWithCurrentPage = ({ children }: Props): JSX.Element => {
-  const className = useCurrentLayoutClassName();
+export const BasicLayoutWithEditorMode = ({ children }: Props): JSX.Element => {
+  const className = useEditorModeClassName();
 
   return (
     <BasicLayout className={className}>

packages/app/src/components/Layout/ShareLinkLayout.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { useCurrentLayoutClassName } from '../../client/services/use-current-layout-class-name';
+import { useEditorModeClassName } from '../../client/services/layout';
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 
 import { RawLayout } from './RawLayout';
@@ -21,7 +21,7 @@ type Props = {
 }
 
 export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
-  const className = useCurrentLayoutClassName();
+  const className = useEditorModeClassName();
 
   return (
     <RawLayout className={className}>

packages/app/src/pages/[[...path]].page.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 
 import EventEmitter from 'events';
@@ -11,7 +11,7 @@ import type {
 } from '@growi/core';
 import ExtensibleCustomError from 'extensible-custom-error';
 import {
-  NextPage, GetServerSideProps, GetServerSidePropsContext,
+  GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
@@ -19,6 +19,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import superjson from 'superjson';
 
+import { useCurrentGrowiLayoutFluidClassName } from '~/client/services/layout';
 import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
@@ -53,7 +54,7 @@ import loggerFactory from '~/utils/logger';
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';
 // import GrowiSubNavigationSwitcher from '../client/js/components/Navbar/GrowiSubNavigationSwitcher';
 import { DescendantsPageListModal } from '../components/DescendantsPageListModal';
-import { BasicLayoutWithCurrentPage } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithEditorMode } from '../components/Layout/BasicLayout';
 import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
@@ -71,6 +72,7 @@ import {
   useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage, useCustomizedLogoSrc, useIsContainerFluid,
 } from '../stores/context';
 
+import { NextPageWithLayout } from './_app.page';
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, generateCustomTitle,
 } from './utils/commons';
@@ -187,7 +189,7 @@ type Props = CommonProps & {
   sidebarConfig: ISidebarConfig,
 };
 
-const Page: NextPage<Props> = (props: Props) => {
+const Page: NextPageWithLayout<Props> = (props: Props) => {
   // const { t } = useTranslation();
   const router = useRouter();
 
@@ -275,6 +277,8 @@ const Page: NextPage<Props> = (props: Props) => {
   useSetupGlobalSocket();
   useSetupGlobalSocketForPage(pageId);
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
+
   const shouldRenderPutbackPageModal = pageWithMeta != null
     ? _isTrashPage(pageWithMeta.data.path)
     : false;
@@ -301,68 +305,73 @@ const Page: NextPage<Props> = (props: Props) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <DrawioViewerScript />
-
-      <BasicLayoutWithCurrentPage>
-
-        <div className="h-100 d-flex flex-column justify-content-between">
-          <header className="py-0 position-relative">
-            <div id="grw-subnav-container">
-              <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
-            </div>
-          </header>
-          <div className="d-edit-none">
-            <GrowiSubNavigationSwitcher />
+      <div className={`dynamic-layout-root ${growiLayoutFluidClass} h-100 d-flex flex-column justify-content-between`}>
+        <header className="py-0 position-relative">
+          <div id="grw-subnav-container">
+            <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
           </div>
+        </header>
+        <div className="d-edit-none">
+          <GrowiSubNavigationSwitcher />
+        </div>
+
+        <div id="grw-subnav-sticky-trigger" className="sticky-top"></div>
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+
+        <div className="flex-grow-1">
+          <div id="main" className={`main ${isUsersHomePage(props.currentPathname) && 'user-page'}`}>
+            <div id="content-main" className="content-main grw-container-convertible">
+              { props.isIdenticalPathPage && <IdenticalPathPage /> }
+
+              { !props.isIdenticalPathPage && (
+                <>
+                  <PageAlerts />
+                  { props.isForbidden && <ForbiddenPage /> }
+                  { props.isNotCreatablePage && <NotCreatablePage />}
+                  { !props.isForbidden && !props.isNotCreatablePage && <DisplaySwitcher />}
+                  {/* <DisplaySwitcher /> */}
+                  <PageStatusAlert />
+                </>
+              ) }
 
-          <div id="grw-subnav-sticky-trigger" className="sticky-top"></div>
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-
-          <div className="flex-grow-1">
-            <div id="main" className={`main ${isUsersHomePage(props.currentPathname) && 'user-page'}`}>
-              <div id="content-main" className="content-main grw-container-convertible">
-                { props.isIdenticalPathPage && <IdenticalPathPage /> }
-
-                { !props.isIdenticalPathPage && (
-                  <>
-                    <PageAlerts />
-                    { props.isForbidden && <ForbiddenPage /> }
-                    { props.isNotCreatablePage && <NotCreatablePage />}
-                    { !props.isForbidden && !props.isNotCreatablePage && <DisplaySwitcher />}
-                    {/* <DisplaySwitcher /> */}
-                    <PageStatusAlert />
-                  </>
-                ) }
-
-                {/* <div className="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
-                  <div id="revision-toc" className="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-                    <div id="revision-toc-content" className="revision-toc-content"></div>
-                  </div>
-                </div> */}
-              </div>
+              {/* <div className="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
+                <div id="revision-toc" className="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
+                  <div id="revision-toc-content" className="revision-toc-content"></div>
+                </div>
+              </div> */}
             </div>
           </div>
-          { !props.isIdenticalPathPage && !props.isNotFound && (
-            <footer className="footer d-edit-none">
-              { pageWithMeta != null && pagePath != null && !isTopPagePath && (
-                <Comments pageId={pageId} pagePath={pagePath} revision={pageWithMeta.data.revision} />
-              ) }
-              { pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path) && (
-                <UsersHomePageFooter creatorId={pageWithMeta.data.creator._id}/>
-              ) }
-              <CurrentPageContentFooter />
-            </footer>
-          )}
+        </div>
+        { !props.isIdenticalPathPage && !props.isNotFound && (
+          <footer className="footer d-edit-none">
+            { pageWithMeta != null && pagePath != null && !isTopPagePath && (
+              <Comments pageId={pageId} pagePath={pagePath} revision={pageWithMeta.data.revision} />
+            ) }
+            { pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path) && (
+              <UsersHomePageFooter creatorId={pageWithMeta.data.creator._id}/>
+            ) }
+            <CurrentPageContentFooter />
+          </footer>
+        )}
+
+        {shouldRenderPutbackPageModal && <PutbackPageModal />}
+      </div>
+    </>
+  );
+};
 
-          {/* TODO: move these components outside of BasicLayoutWithCurrentPage */}
-          <UnsavedAlertDialog />
-          <DescendantsPageListModal />
-          <DrawioModal />
-          <HandsontableModal />
+Page.getLayout = function getLayout(page) {
+  return (
+    <>
+      <DrawioViewerScript />
 
-          {shouldRenderPutbackPageModal && <PutbackPageModal />}
-        </div>
-      </BasicLayoutWithCurrentPage>
+      <BasicLayoutWithEditorMode>
+        {page}
+      </BasicLayoutWithEditorMode>
+      <UnsavedAlertDialog />
+      <DescendantsPageListModal />
+      <DrawioModal />
+      <HandsontableModal />
     </>
   );
 };

packages/app/src/pages/admin/plugins.page.tsx

@@ -4,6 +4,7 @@ import {
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
+import Head from 'next/head';
 import { Container, Provider } from 'unstated';
 
 
@@ -37,7 +38,10 @@ const AdminAppPage: NextPage<CommonProps> = (props) => {
 
   return (
     <Provider inject={[...injectableContainers]}>
-      <AdminLayout title={generateCustomTitle(props, title)} componentTitle={title} >
+      <AdminLayout componentTitle={title} >
+        <Head>
+          <title>{generateCustomTitle(props, title)}</title>
+        </Head>
         <PluginsExtensionPageContents />
       </AdminLayout>
     </Provider>

packages/app/src/pages/share/[[...path]].page.tsx

@@ -9,6 +9,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
+import { useCurrentGrowiLayoutFluidClassName } from '~/client/services/layout';
 import CountBadge from '~/components/Common/CountBadge';
 import PageListIcon from '~/components/Icons/PageListIcon';
 import { ShareLinkLayout } from '~/components/Layout/ShareLinkLayout';
@@ -28,6 +29,7 @@ import {
 import { useDescendantsPageListModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
+import { NextPageWithLayout } from '../_app.page';
 import {
   CommonProps, getServerSideCommonProps, generateCustomTitle, getNextI18NextConfig,
 } from '../utils/commons';
@@ -48,7 +50,7 @@ type Props = CommonProps & {
   rendererConfig: RendererConfig,
 };
 
-const SharedPage: NextPage<Props> = (props: Props) => {
+const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
   useIsSearchPage(false);
   useShareLinkId(props.shareLink?._id);
   useCurrentPageId(props.shareLink?.relatedPage._id);
@@ -64,6 +66,8 @@ const SharedPage: NextPage<Props> = (props: Props) => {
   const { open: openDescendantPageListModal } = useDescendantsPageListModal();
   const { t } = useTranslation();
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
+
   const isNotFound = props.shareLink == null || props.shareLink.relatedPage == null || props.shareLink.relatedPage.isEmpty;
   const isShowSharedPage = !props.disableLinkSharing && !isNotFound && !props.isExpired;
   const shareLink = props.shareLink;
@@ -76,88 +80,91 @@ const SharedPage: NextPage<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
 
-      <DrawioViewerScript />
-
-      <ShareLinkLayout>
-        <div className="h-100 d-flex flex-column justify-content-between">
-          <header className="py-0 position-relative">
-            {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
-          </header>
+      <div className={`dynamic-layout-root ${growiLayoutFluidClass} h-100 d-flex flex-column justify-content-between`}>
+        <header className="py-0 position-relative">
+          {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
+        </header>
 
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
 
-          <div className="flex-grow-1">
-            <div id="content-main" className="content-main">
-              <div className="grw-container-convertible">
-                { props.disableLinkSharing && (
-                  <div className="mt-4">
-                    <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
-                  </div>
-                )}
-
-                { (isNotFound && !props.disableLinkSharing) && (
-                  <div className="container-lg">
-                    <h2 className="text-muted mt-4">
-                      <i className="icon-ban" aria-hidden="true" />
-                      <span> Page is not found</span>
-                    </h2>
-                  </div>
-                )}
-
-                { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
-                  <div className="container-lg">
-                    <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                    <h2 className="text-muted mt-4">
-                      <i className="icon-ban" aria-hidden="true" />
-                      <span> Page is expired</span>
-                    </h2>
-                  </div>
-                )}
-
-                {(isShowSharedPage && shareLink != null) && (
-                  <>
-                    <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                    <div className="d-flex flex-column flex-lg-row-reverse">
-
-                      <div className="grw-side-contents-container">
-                        <div className="grw-side-contents-sticky-container">
-
-                          {/* Page list */}
-                          <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
-                            { shareLink.relatedPage.path != null && (
-                              <button
-                                type="button"
-                                className="btn btn-block btn-outline-secondary grw-btn-page-accessories
-                                rounded-pill d-flex justify-content-between align-items-center"
-                                onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
-                                data-testid="pageListButton"
-                              >
-                                <div className="grw-page-accessories-control-icon">
-                                  <PageListIcon />
-                                </div>
-                                {t('page_list')}
-                                <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
-                              </button>
-                            ) }
-                          </div>
-
-                          <div className="d-none d-lg-block">
-                            <TableOfContents />
-                          </div>
-                        </div>
+        <div className="flex-grow-1">
+          <div id="content-main" className="content-main grw-container-convertible">
+            { props.disableLinkSharing && (
+              <div className="mt-4">
+                <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
+              </div>
+            )}
+
+            { (isNotFound && !props.disableLinkSharing) && (
+              <div className="container-lg">
+                <h2 className="text-muted mt-4">
+                  <i className="icon-ban" aria-hidden="true" />
+                  <span> Page is not found</span>
+                </h2>
+              </div>
+            )}
+
+            { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
+              <div className="container-lg">
+                <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                <h2 className="text-muted mt-4">
+                  <i className="icon-ban" aria-hidden="true" />
+                  <span> Page is expired</span>
+                </h2>
+              </div>
+            )}
+
+            {(isShowSharedPage && shareLink != null) && (
+              <>
+                <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                <div className="d-flex flex-column flex-lg-row-reverse">
+
+                  <div className="grw-side-contents-container">
+                    <div className="grw-side-contents-sticky-container">
+
+                      {/* Page list */}
+                      <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
+                        { shareLink.relatedPage.path != null && (
+                          <button
+                            type="button"
+                            className="btn btn-block btn-outline-secondary grw-btn-page-accessories
+                            rounded-pill d-flex justify-content-between align-items-center"
+                            onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
+                            data-testid="pageListButton"
+                          >
+                            <div className="grw-page-accessories-control-icon">
+                              <PageListIcon />
+                            </div>
+                            {t('page_list')}
+                            <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
+                          </button>
+                        ) }
                       </div>
 
-                      <div className="flex-grow-1 flex-basis-0 mw-0">
-                        <Page />
+                      <div className="d-none d-lg-block">
+                        <TableOfContents />
                       </div>
                     </div>
-                  </>
-                )}
-              </div>
-            </div>
+                  </div>
+
+                  <div className="flex-grow-1 flex-basis-0 mw-0">
+                    <Page />
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </div>
-      </ShareLinkLayout>
+      </div>
+    </>
+  );
+};
+
+SharedPage.getLayout = function getLayout(page) {
+  return (
+    <>
+      <DrawioViewerScript />
+      <ShareLinkLayout>{page}</ShareLinkLayout>
     </>
   );
 };

packages/app/src/pages/trash.page.tsx

@@ -6,6 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
+import { useCurrentGrowiLayoutFluidClassName } from '~/client/services/layout';
 import { GrowiSubNavigation } from '~/components/Navbar/GrowiSubNavigation';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
@@ -16,13 +17,14 @@ import {
   useCurrentProductNavWidth, useCurrentSidebarContents, useDrawerMode, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed,
 } from '~/stores/ui';
 
-import { BasicLayoutWithCurrentPage } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithEditorMode } from '../components/Layout/BasicLayout';
 import {
   useCurrentUser, useCurrentPageId, useCurrentPathname,
   useIsSearchServiceConfigured, useIsSearchServiceReachable,
   useIsSearchScopeChildrenAsDefault, useIsSearchPage, useShowPageLimitationXL, useIsGuestUser, useRendererConfig,
 } from '../stores/context';
 
+import { NextPageWithLayout } from './_app.page';
 import {
   CommonProps, getServerSideCommonProps, getNextI18NextConfig, generateCustomTitle,
 } from './utils/commons';
@@ -46,7 +48,7 @@ type Props = CommonProps & {
   rendererConfig: RendererConfig,
 };
 
-const TrashPage: NextPage<CommonProps> = (props: Props) => {
+const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
   useCurrentUser(props.currentUser ?? null);
 
   useIsSearchServiceConfigured(props.isSearchServiceConfigured);
@@ -71,6 +73,8 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isGuestUser } = useIsGuestUser();
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
+
   const title = generateCustomTitle(props, 'GROWI');
 
   return (
@@ -78,7 +82,7 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <BasicLayoutWithCurrentPage>
+      <div className={`dynamic-layout-root ${growiLayoutFluidClass}`}>
         <header className="py-0 position-relative">
           <GrowiSubNavigation
             pagePath="/trash"
@@ -89,13 +93,22 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
           />
         </header>
 
-        <div className="grw-container-convertible mb-5 pb-5">
+        <div className="content-main grw-container-convertible mb-5 pb-5">
           <TrashPageList />
         </div>
 
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-      </BasicLayoutWithCurrentPage>
+      </div>
+    </>
+  );
+};
 
+TrashPage.getLayout = function getLayout(page) {
+  return (
+    <>
+      <BasicLayoutWithEditorMode>
+        {page}
+      </BasicLayoutWithEditorMode>
       <EmptyTrashModal />
       <PutbackPageModal />
     </>

packages/app/src/stores/ui.tsx

@@ -79,14 +79,16 @@ export const useIsMobile = (): SWRResponse<boolean, Error> => {
   return useStaticSWR<boolean, Error>(key, undefined, configuration);
 };
 
-const getClassNamesByEditorMode = (editorMode: EditorMode | undefined, isSidebar = false): string[] => {
+// TODO: Enable `editing-sidebar` class
+// https://redmine.weseek.co.jp/issues/111527
+const getClassNamesByEditorMode = (editorMode: EditorMode | undefined /* , isSidebar = false */): string[] => {
   const classNames: string[] = [];
   switch (editorMode) {
     case EditorMode.Editor:
       classNames.push('editing', 'builtin-editor');
-      if (isSidebar) {
-        classNames.push('editing-sidebar');
-      }
+      // if (isSidebar) {
+      //   classNames.push('editing-sidebar');
+      // }
       break;
     case EditorMode.HackMD:
       classNames.push('editing', 'hackmd');
@@ -138,8 +140,10 @@ export const determineEditorModeByHash = (): EditorMode => {
   }
 };
 
+// TODO: Enable `editing-sidebar` class somehow
+// https://redmine.weseek.co.jp/issues/111527
 type EditorModeUtils = {
-  getClassNamesByEditorMode: (isEditingSidebar: boolean) => string[],
+  getClassNamesByEditorMode: (/* isEditingSidebar: boolean */) => string[],
 }
 
 export const useEditorMode = (): SWRResponseWithUtils<EditorModeUtils, EditorMode> => {
@@ -167,9 +171,11 @@ export const useEditorMode = (): SWRResponseWithUtils<EditorModeUtils, EditorMod
     return mutateOriginal(editorMode, shouldRevalidate);
   }, [isEditable, mutateOriginal]);
 
+  // TODO: Enable `editing-sidebar` class
+  // https://redmine.weseek.co.jp/issues/111527
   // construct getClassNamesByEditorMode method
-  const getClassNames = useCallback((isEditingSidebar: boolean) => {
-    return getClassNamesByEditorMode(swrResponse.data, isEditingSidebar);
+  const getClassNames = useCallback((/* isEditingSidebar: boolean */) => {
+    return getClassNamesByEditorMode(swrResponse.data /* , isEditingSidebar */);
   }, [swrResponse.data]);
 
   return Object.assign(swrResponse, {

packages/app/src/styles/_layout.scss

@@ -6,11 +6,11 @@ body {
   overscroll-behavior-y: none;
 }
 
-.layout-root:not(.growi-layout-fluid) .grw-container-convertible {
+.dynamic-layout-root:not(.growi-layout-fluid) .grw-container-convertible {
   @extend .container-lg;
 }
 
-.layout-root.growi-layout-fluid .grw-container-convertible {
+.dynamic-layout-root.growi-layout-fluid .grw-container-convertible {
   @extend .container-fluid;
 }