Whenever I click on the Material UI text Field during login, the screen gets pushed down and cuts off content at the top of the page. View image description here
-I have examined my CSS to see if setting the container height to 100vh is causing this issue, but that does not seem to be the case. -I also tried adding CSS for screen ratios below 450 to reduce the height to 80vh, yet the problem persists as the page layout does not return to normal after typing in the text field.
.app-container .unauthorised-view,
.not-found-view,
.login {
width: 100%;
height: 100vh;
background-image: url('../../public/static/media/bg_unauth.jpg');
background-size: contain;
background-position: center center;
background-color: #ededed;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}