fix: do not make page swapper height 100% by default

This was causing issues on nested layouts.
Now you must be specific by using className & pageTransitionClassName.

Author: satazor

www/app/App.js

@@ -16,6 +16,8 @@ import CookieBanner from './cookie-banner';
 import useFouc from './use-fouc-fix';
 import { useSeoData } from './App.data';
 
+import styles from './App.module.css';
+
 subscribeToRouter();
 
 export const App = ({ Component, pageProps }) => {
@@ -62,7 +64,13 @@ export const App = ({ Component, pageProps }) => {
                     pageProps={ pageProps }
                     pageKey={ pageKey }
                     defaultLayout={ <MainLayout /> }>
-                    { (tree) => <PageSwapper node={ tree } nodeKey={ tree.key } /> }
+                    { (tree) => (
+                        <PageSwapper
+                            node={ tree }
+                            nodeKey={ tree.key }
+                            pageTransitionClassName={ styles.pageTransition }
+                            className={ styles.pageSwapper } />
+                    ) }
                 </LayoutTree>
             </RouterScrollProvider>
         </>

www/app/App.module.css

@@ -0,0 +1,7 @@
+.pageSwapper {
+    height: 100%;
+
+    & .pageTransition {
+        height: 100%;
+    }
+}

www/shared/react/main-layout/MainLayout.js

@@ -11,18 +11,20 @@ const MainLayout = ({ children, className, ...rest }) => (
     <div className={ classNames(styles.mainLayout, className) } { ...rest }>
         <Header className={ styles.header } />
 
-        <div className={ styles.content }>
+        { children &&
             <PageSwapper
                 node={ children }
-                nodeKey={ children.key }>
+                nodeKey={ children.key }
+                pageTransitionClassName={ styles.pageTransition }
+                className={ styles.pageSwapper }>
                 { ({ node }) => (
                     <>
                         <div className={ styles.page }>{ node }</div>
                         <Footer className={ styles.footer } />
                     </>
                 ) }
             </PageSwapper>
-        </div>
+        }
     </div>
 );
 

www/shared/react/main-layout/MainLayout.module.css

@@ -11,17 +11,23 @@
         flex: 0 0 auto;
     }
 
-    & .content {
+    & .pageSwapper {
         display: flex;
         flex: 1 0;
         flex-direction: column;
 
-        & .page {
+        & .pageTransition {
+            display: flex;
             flex: 1 0;
-        }
+            flex-direction: column;
+
+            & .page {
+                flex: 1 0;
+            }
 
-        & .footer {
-            flex: 0 0 auto;
+            & .footer {
+                flex: 0 0 auto;
+            }
         }
     }
 }

www/shared/react/page-swapper/PageSwapper.js

@@ -1,34 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import RawPageSwapper from '@moxy/react-page-swapper'; // eslint-disable-line no-restricted-imports
 import { useRouterScroll } from '@moxy/next-router-scroll';
 import PageTransition from './page-transition';
 
-import styles from './PageSwapper.module.css';
-
-const PageSwapper = ({ children, className, ...rest }) => {
+const PageSwapper = ({ children, pageTransitionClassName, ...rest }) => {
     const { updateScroll } = useRouterScroll();
 
     return (
-        <RawPageSwapper
-            { ...rest }
-            updateScroll={ updateScroll }
-            className={ classNames(styles.pageSwapper, className) }>
+        <RawPageSwapper { ...rest } updateScroll={ updateScroll }>
             { ({ node, ...rest }) => {
                 if (typeof children === 'function') {
                     node = children({ node, ...rest });
                 }
 
-                return <PageTransition node={ node } { ...rest } />;
+                return <PageTransition node={ node } className={ pageTransitionClassName } { ...rest } />;
             } }
         </RawPageSwapper>
     );
 };
 
 PageSwapper.propTypes = {
     children: PropTypes.func,
-    className: PropTypes.string,
+    pageTransitionClassName: PropTypes.string,
 };
 
 export default PageSwapper;

www/shared/react/page-swapper/PageSwapper.module.css

@@ -1,8 +1,4 @@
 .fade {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
     &.enter {
         opacity: 0;
     }