fix: The login overflows because of the wrong container height

frontend/src/index.css

@@ -21,6 +21,15 @@ body {
 
 }
 
+.login-center {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    /* 64px is the height of the App bar */
+    height: calc(100vh - 64px);
+}
+
 .paper {
     padding: 12px;
 }

frontend/src/pages/login.tsx

@@ -82,15 +82,8 @@ const LoginPageWithRouter = withRouter(
                 }
             };
 
-            return <div className="content">
-                <Grid
-                    container
-                    spacing={0}
-                    direction="column"
-                    alignItems="center"
-                    justify="center"
-                    style={{ minHeight: '100vh' }}>
-                    <Grid item xs={12}>
+            return <div>
+                <div className="login-center">
                     <Paper className="paper">
                         <Typography variant="title">Login</Typography>
                         <Grid container direction="column" spacing={8}>
@@ -126,8 +119,7 @@ const LoginPageWithRouter = withRouter(
                             </Grid>
                         </Grid>
                     </Paper>
-                    </Grid>
-                </Grid>
+                </div>
                 <Snackbar
                     open={this.props.snackOpen}
                     onClose={() => this.props.setSnackbar(false, "")}