fix: align 404 page content to the center

packages/web/src/components/Layout/index.jsx

@@ -113,7 +113,12 @@ export default function PublicLayout({ children }) {
         onDrawerClose={closeDrawer}
       />
 
-      <Box sx={{ display: 'flex', height: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
         <Drawer
           links={drawerLinks}
           bottomLinks={bottomLinks}

packages/web/src/components/NotFound/index.jsx

@@ -7,6 +7,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useAuthentication from 'hooks/useAuthentication';
 import Layout from 'components/Layout';
 import PublicLayout from 'components/PublicLayout';
+
 export default function NoResultFound() {
   const formatMessage = useFormatMessage();
   const { isAuthenticated } = useAuthentication();
@@ -32,6 +33,7 @@ export default function NoResultFound() {
       </Link>
     </Stack>
   );
+
   return isAuthenticated ? (
     <Layout>{pageContent}</Layout>
   ) : (

packages/web/src/components/PublicLayout/index.jsx

@@ -21,8 +21,7 @@ function Layout({ children }) {
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          height: '100%',
+          flex: 1,
-          minHeight: '100vh',
         }}
       >
         <Toolbar />

packages/web/src/styles/theme.js

@@ -226,6 +226,8 @@ export const defaultTheme = createTheme({
         },
         '#root': {
           minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
         },
       },
     },