reorganize div container for page

packages/app/src/components/Page/PageContents.tsx

@@ -13,16 +13,12 @@ import {
 import { useEditingMarkdown } from '~/stores/editor';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
-import {
-  useCurrentPageTocNode,
-  useIsMobile,
-} from '~/stores/ui';
+import { useCurrentPageTocNode } from '~/stores/ui';
 import { registerGrowiFacade } from '~/utils/growi-facade';
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './RevisionRenderer';
 
-import styles from './PageContents.module.scss';
 
 const logger = loggerFactory('growi:Page');
 
@@ -36,7 +32,6 @@ export const PageContents = (): JSX.Element => {
   const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
   const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
   const { data: isGuestUser } = useIsGuestUser();
-  const { data: isMobile } = useIsMobile();
   const { mutate: mutateCurrentPageTocNode } = useCurrentPageTocNode();
 
   const { data: rendererOptions, mutate: mutateRendererOptions } = useViewOptions((toc: HtmlElementNode) => {
@@ -100,11 +95,11 @@ export const PageContents = (): JSX.Element => {
   const { _id: revisionId, body: markdown } = currentPage.revision;
 
   return (
-    <div className={`mb-5 ${isMobile ? `page-mobile ${styles['page-mobile']}` : ''}`}>
+    <>
       { revisionId != null && (
         <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />
       )}
-    </div>
+    </>
   );
 
 };

packages/app/src/components/Page/PageView.tsx

@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic';
 import {
   useIsForbidden, useIsIdenticalPath, useIsNotCreatable, useIsNotFound,
 } from '~/stores/context';
+import { useIsMobile } from '~/stores/ui';
 
 import type { CommentsProps } from '../Comments';
 import { MainPane } from '../Layout/MainPane';
@@ -16,6 +17,9 @@ import type { PageSideContentsProps } from '../PageSideContents';
 import { UserInfo } from '../User/UserInfo';
 import type { UsersHomePageFooterProps } from '../UsersHomePageFooter';
 
+import styles from './PageView.module.scss';
+
+
 const { isUsersHomePage } = pagePathUtils;
 
 
@@ -50,6 +54,7 @@ export const PageView = (props: Props): JSX.Element => {
   const { data: isForbidden } = useIsForbidden();
   const { data: isNotCreatable } = useIsNotCreatable();
   const { data: isNotFound } = useIsNotFound();
+  const { data: isMobile } = useIsMobile();
 
   const specialContents = useMemo(() => {
     if (isIdenticalPathPage) {
@@ -109,7 +114,9 @@ export const PageView = (props: Props): JSX.Element => {
       { specialContents == null && (
         <>
           { isUsersHomePagePath && <UserInfo author={page?.creator} /> }
-          { contents }
+          <div className={`mb-5 ${isMobile ? `page-mobile ${styles['page-mobile']}` : ''}`}>
+            { contents }
+          </div>
         </>
       ) }
 

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

@@ -180,7 +180,9 @@ const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
           {(isShowSharedPage && shareLink != null) && (
             <>
               <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-              { contents }
+              <div className="mb-5">
+                { contents }
+              </div>
             </>
           )}
         </MainPane>