Fix height issue with unauthenticated app related screens

src/app/UnauthenticatedApp.js

@@ -7,7 +7,7 @@ import UnauthenticatedHome from '../screens/UnauthenticatedHome';
 
 function UnauthenticatedApp() {
   return (
-    <Container maxWidth="false" sx={container}>
+    <Container disableGutters maxWidth="false" sx={container}>
       <Routes>
         <Route path="/" element={<UnauthenticatedHome />} />
         <Route path="/login" element={<Login />} />
@@ -19,7 +19,7 @@ function UnauthenticatedApp() {
 }
 
 const container = {
-  height: '100vh',
+  height: 'auto',
   margin: 0,
   padding: 0,
   display: 'flex',

src/screens/Login/View.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import {
   Box,
   Button,
@@ -28,10 +27,11 @@ function View({
   error,
   layoutType,
 }) {
-  const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType];
+  const { container, paper, boxLogo, boxForm, logoContainer } =
+    styles[layoutType];
 
   return (
-    <Fragment>
+    <Container disableGutters sx={container}>
       <Paper sx={paper} elevation={4} variant="elevation">
         <Box sx={boxLogo}>
           <Container sx={logoContainer}>
@@ -82,7 +82,7 @@ function View({
         severity="error"
         message={error && error.message}
       />
-    </Fragment>
+    </Container>
   );
 }
 

src/screens/Login/styles.js

@@ -1,4 +1,12 @@
 // ========== Desktop  ==========
+const desktopContainer = {
+  width: '100%',
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
 const desktopPaper = {
   width: '950px',
   height: '500px',
@@ -39,6 +47,7 @@ const desktopBoxForm = {
 const logoContainerDesktop = {};
 
 const desktop = {
+  container: desktopContainer,
   paper: desktopPaper,
   boxLogo: desktopBoxLogo,
   boxForm: desktopBoxForm,
@@ -46,6 +55,8 @@ const desktop = {
 };
 
 // ========== Mobile ==========
+const mobileContainer = { ...desktopContainer };
+
 const mobilePaper = {
   ...desktopPaper,
   flexDirection: 'column',
@@ -71,6 +82,7 @@ const logoContainerMobile = {
 };
 
 const mobile = {
+  container: mobileContainer,
   paper: mobilePaper,
   boxLogo: mobileBoxLogo,
   boxForm: mobileBoxForm,
@@ -79,6 +91,7 @@ const mobile = {
 
 // ========== Unset ==========
 const unset = {
+  container: null,
   paper: null,
   boxLogo: null,
   boxForm: null,

src/screens/Register/View.js

@@ -38,8 +38,9 @@ function View({
   return (
     <Container
       sx={{
+        height: 'auto',
         margin: '0 auto',
-        padding: '500px 0',
+        padding: '100px 0',
       }}
       disableGutters
     >