expand PageView

apps/app/src/components/Common/PageViewLayout.module.scss

@@ -8,14 +8,7 @@ $page-view-layout-margin-top: 32px;
 
 .page-view-layout :global {
   $page-content-footer-min-heigh: 130px;
-
-  display: flex;
-  flex-direction: column;
   min-height: calc(100vh - #{$subnavigation-height + $page-view-layout-margin-top + $page-content-footer-min-heigh});
-
-  .content-main {
-    flex-grow: 1;
-  }
 }
 
 // md/lg layout padding

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

@@ -19,13 +19,13 @@ export const PageViewLayout = (props: Props): JSX.Element => {
 
   return (
     <>
-      <div id="main" className={`main ${pageViewLayoutClass}`}>
-        <div id="content-main" className="content-main container-lg grw-container-convertible">
+      <div id="main" className={`main ${pageViewLayoutClass} flex-expand-vert`}>
+        <div id="content-main" className="content-main container-lg grw-container-convertible flex-expand-vert">
           { headerContents != null && headerContents }
           { sideContents != null
             ? (
-              <div className="d-flex gap-3">
-                <div className="flex-grow-1 flex-basis-0 mw-0">
+              <div className="flex-expand-horiz gap-3">
+                <div className="flex-expand-vert flex-basis-0 mw-0">
                   {children}
                 </div>
                 <div className="grw-side-contents-container col-lg-3  d-edit-none d-print-none" data-vrt-blackout-side-contents>

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

@@ -132,7 +132,7 @@ export const PageView = (props: Props): JSX.Element => {
       <>
         <PageContentsUtilities />
 
-        <div>
+        <div className='flex-expand-vert justify-content-between'>
           <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />
 
           { !isIdenticalPathPage && !isNotFound && (
@@ -150,6 +150,8 @@ export const PageView = (props: Props): JSX.Element => {
     );
   };
 
+  const mobileClass = isMobile ? styles['page-mobile'] : '';
+
   return (
     <PageViewLayout
       headerContents={headerContents}
@@ -162,7 +164,7 @@ export const PageView = (props: Props): JSX.Element => {
       {specialContents == null && (
         <>
           {(isUsersHomepagePath && page?.creator != null) && <UserInfo author={page.creator} />}
-          <div className={`${isMobile ? `page-mobile ${styles['page-mobile']}` : ''}`}>
+          <div className={`flex-expand-vert ${mobileClass}`}>
             <Contents />
           </div>
         </>