responsive login form with flex

I am trying to create a login form for my university project. But unfortunately when I try it in dev-tools it looks fine, but when I try to open it on my phone, it does not look like it should.
Any ideas? You can look at the site here:
https://32chnb9g-4200.euw.devtunnels.ms/#/login

Why is my form overflowing when it does not need to?

GitHub

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

EIO•5/18/24, 10:22 AM

use for your 100% height instead of

EIO•5/18/24, 10:22 AM

BTW, you didn't specify How it should look
My response is solely in respect to the overflow part of your question.

raphi0901OP•5/18/24, 10:24 AM

the first screenshot from the dev-tools is the way it should look like on the phone

raphi0901OP•5/18/24, 10:25 AM

i changed it now to 100svh but this does not look right either

EIO•5/18/24, 10:28 AM

Are you auto-centralising the form or you gave some margin/padding at the top to push the content down?

Also, share the code if you can

raphi0901OP•5/18/24, 10:29 AM

I'll try to provide the code.. give me a second

raphi0901OP•5/18/24, 10:35 AM

hopefully it works without the backend:
https://github.com/raphi-0901/login-sample

GitHub

GitHub - raphi-0901/login-sample

Contribute to raphi-0901/login-sample development by creating an account on GitHub.

EIO•5/18/24, 10:54 AM

In your file, take off the top margin (mt-[4.5rem]) and centralise the login automatically, using flex or grid

raphi0901OP•5/18/24, 11:10 AM

thanks for your input. the margin-top was for the fixed navigation, so the content is not hidden. If I try, what you said I unfortunately get basically the same behavior as before.

raphi0901OP•5/18/24, 11:11 AM

this is what it looks like now:

raphi0901OP•5/18/24, 11:31 AM

I pushed my changes

raphi0901OP•5/18/24, 11:42 AM

I just tried to visualize it.. I have no clue why the login part is bigger than the rest. Also this just happens on mobile

EIO•5/18/24, 1:19 PM

I am confused.
Was it what you did in the first picture that you pushed and is showing up as the second picture?

raphi0901OP•5/18/24, 1:45 PM

No, i did not push the last image.. I just tried to figure out which element causes this overflowing

raphi0901OP•5/18/24, 1:45 PM

The last commit should be the second last image