fix: The login overflows because of the wrong container height

This commit is contained in:
Alexander Polynomdivision 2018-10-12 12:14:24 +02:00
parent aba3626b7d
commit 45dc47f3b9
2 changed files with 46 additions and 45 deletions

View File

@ -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 { .paper {
padding: 12px; padding: 12px;
} }

View File

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