From 45dc47f3b9d630480ef81ad2721faf73e78de08c Mon Sep 17 00:00:00 2001
From: Alexander Polynomdivision <digitalmail555@googlemail.com>
Date: Fri, 12 Oct 2018 12:14:24 +0200
Subject: [PATCH] fix: The login overflows because of the wrong container
 height

---
 frontend/src/index.css       |  9 ++++
 frontend/src/pages/login.tsx | 82 ++++++++++++++++--------------------
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9c33a36..42001d7 100644
--- a/frontend/src/index.css
+++ b/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;
 }
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 44c4200..2240bda 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -82,52 +82,44 @@ const LoginPageWithRouter = withRouter(
                 }
             };
 
-            return <div className="content">
-                <Grid
-                    container
-                    spacing={0}
-                    direction="column"
-                    alignItems="center"
-                    justify="center"
-                    style={{ minHeight: '100vh' }}>
-                    <Grid item xs={12}>
-                        <Paper className="paper">
-                            <Typography variant="title">Login</Typography>
-                            <Grid container direction="column" spacing={8}>
-                                <Grid item>
-                                    <TextField
-                                        label="Username"
-                                        onKeyPress={onEnter}
-                                        inputRef={node => this.usernameRef = node} />
-                                </Grid>
-                                <Grid item>
-                                    <TextField
-                                        label="Passwort"
-                                        type="password"
-                                        onKeyPress={onEnter}
-                                        inputRef={node => this.passwordRef = node} />
-                                </Grid>
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="primary"
-                                        className="login-btn"
-                                        onClick={() => this.performLogin()}>
-                                        Login
-                                    </Button>
-                                    <Link to="/register">
-                                        Registrieren
-                                    </Link>
-                                    {
-                                        this.props.loading ? (
-                                            <LinearProgress />
-                                        ) : undefined
-                                    }
-                                </Grid>
+            return <div>
+                <div className="login-center">
+                    <Paper className="paper">
+                        <Typography variant="title">Login</Typography>
+                        <Grid container direction="column" spacing={8}>
+                            <Grid item>
+                                <TextField
+                                    label="Username"
+                                    onKeyPress={onEnter}
+                                    inputRef={node => this.usernameRef = node} />
                             </Grid>
-                        </Paper>
-                    </Grid>
-                </Grid>
+                            <Grid item>
+                                <TextField
+                                    label="Passwort"
+                                    type="password"
+                                    onKeyPress={onEnter}
+                                    inputRef={node => this.passwordRef = node} />
+                            </Grid>
+                            <Grid item>
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    className="login-btn"
+                                    onClick={() => this.performLogin()}>
+                                    Login
+                            </Button>
+                                <Link to="/register">
+                                    Registrieren
+                            </Link>
+                                {
+                                    this.props.loading ? (
+                                        <LinearProgress />
+                                    ) : undefined
+                                }
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                </div>
                 <Snackbar
                     open={this.props.snackOpen}
                     onClose={() => this.props.setSnackbar(false, "")}