Why does my mobile form require scrolling despite enough screen space?

Question

I wrote a fullstack application with React frontend. I use daisyUI and tailwind for CSS. My application is deployed and accessible under https://cashflash.app

The application displays correctly on desktop browsers. However, on mobile devices (tested on iPhone 12 mini and iPhone XR), the sign-in form (and all the others, I picked this one as an example) at the /sign-in path is not fully visible without scrolling. I had the same issue on my laptop that I resolved by changing min-h-screen to h-full in the form's wrapper div.

Below is the code:

Signin.tsx

return (
        <div className="relative flex flex-col items-center justify-center w-full h-full text-base-content gap-4">
            {/*<h1 className="text-3xl font-bold text-center mb-8 text-primary">{t.signin.signin}</h1>*/}
            {alertType && (
                <Alert key={alertKey} type={alertType} message={alertMessage}/>
            )}
            <div className="form-control w-full max-w-xs p-8 bg-base-200 shadow-xl rounded-lg">
                <FormInput label={t.signin.email}
                           type="email" placeholder=""
                           value={email}
                           onChange={e => setEmail(e.target.value)}/>
                <FormInput label={t.signin.password}
                           type="password"
                           placeholder=""
                           value={password}
                           onChange={e => setPassword(e.target.value)}/>
                <Link to="/password-forgot"
                      className="mt-2 text-blue-500 hover:text-blue-700">{t.signin.forgotPassword}</Link>
                <Button className={"btn-primary mt-4"}
                        onClick={handleSubmit}
                        text={t.signin.signin}/>
                <Button className={"btn-outline mt-4 flex items-center justify-center"}
                        onClick={handleGoogleSignIn}
                        text="">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 488 512"
                         className="w-6 h-6 mr-2">
                        PATH HERE
                    </svg>
                    {t.signin.signInWithGoogle}
                </Button>
                <div className="mt-6 text-center">
                    <p className="mt-2">{t.signin.noAccount}</p>
                    <Link to="/sign-up" className="text-blue-500 hover:text-blue-700">{t.signin.signup}</Link>
                </div>
            </div>
        </div>
    );

Navbar.tsx

return (
        <div className="navbar bg-base-200">
            <div className="flex-1">
                <a className="btn text-xl" onClick={() => handleLogo()}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="w-6 h-6 mr-1">
                        PATH HERE
                    </svg>
                    Cashflash
                </a>
            </div>
            <div className="flex-none hidden md:flex">
                <label className="swap swap-rotate mr-4">
                    <input type="checkbox" onChange={toggleLanguage} checked={language == 'en'}/>
                    <svg className="swap-off fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 512 512">
                        PATH HERE
                    </svg>
                    <svg className="swap-on fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 512 512">
                        PATH HERE
                    </svg>
                </label>
                <label className="swap swap-rotate mr-4">
                    <input type="checkbox" className="theme-controller" onChange={toggleTheme}
                           checked={theme === 'light'}/>
                    <svg className="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24">
                        PATH HERE
                    </svg>
                    <svg className="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24">
                        PATH HERE
                    </svg>
                </label>
                {!isSignedIn ? (
                    <>
                        <Button className={"btn-neutral text-xs sm:text-sm px-2 sm:px-4 mr-2"} onClick={handleSignIn}
                                text={t.navbar.signin}/>
                    </>
                ) : (
                    <div className="dropdown dropdown-end">
                        <div tabIndex={0} role="button" className="btn btn-circle mr-6">
                            <div className="w-8">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                     viewBox="0 0 448 512">
                                    PATH HERE
                                </svg>
                            </div>
                        </div>
                        <ul tabIndex={0}
                            className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52">
                            <li><a onClick={handleSettings}>{t.navbar.settings}</a></li>
                            <li><a onClick={handleSignout}>{t.navbar.signout}</a></li>
                        </ul>
                    </div>
                )}
            </div>
            <div className="flex md:hidden">
                <label className="swap swap-rotate mr-4">
                    <input type="checkbox" className="theme-controller" onChange={toggleTheme}
                           checked={theme === 'light'}/>
                    <svg className="swap-off fill-current w-9 h-9" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24">
                        PATH HERE
                    </svg>
                    <svg className="swap-on fill-current w-9 h-9" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24">
                        PATH HERE
                    </svg>
                </label>
                <div className="dropdown dropdown-end">
                    <div tabIndex={0} role="button" className="btn btn-circle mr-3">
                        <div className="w-7">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                 viewBox="0 0 448 512">
                                PATH HERE
                            </svg>
                        </div>
                    </div>
                    <ul tabIndex={0}
                        className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52 z-50">
                        {!isSignedIn ? (
                            <>
                                <li><a onClick={handleSignIn}>{t.navbar.signin}</a></li>
                                <li><a onClick={handleLanguageTextClick}>PL / EN</a></li>
                            </>
                        ) : (
                            <div className="dropdown dropdown-end">
                                <ul>
                                    <li><a onClick={handleSettings}>{t.navbar.settings}</a></li>
                                    <li><a onClick={handleSignout}>{t.navbar.signout}</a></li>
                                    <li><a onClick={handleLanguageTextClick}>PL / EN</a></li>
                                </ul>
                            </div>
                        )}
                    </ul>
                </div>
            </div>
        </div>
    );

App.tsx

return (
        <Router>
            <LanguageProvider>
                <ThemeProvider>
                    <AuthProvider>
                        <CsrfProvider>
                            <div className="flex flex-col min-h-screen">
                                <Navbar/>
                                <Routes>
                                    <Route path="/" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <Cashflash/>
                                        </div>
                                    }/>
                                    <Route path="/sign-in" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <Signin/>
                                        </div>
                                    }/>
                                    <Route path="/sign-up" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <Signup/>
                                        </div>
                                    }/>
                                    <Route path="/confirm-email" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <ConfirmEmail/>
                                        </div>
                                    }/>
                                    <Route path="/settings" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <Settings/>
                                        </div>
                                    }/>
                                    <Route path="/default-theme" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <DefaultTheme/>
                                        </div>
                                    }/>
                                    <Route path="/default-language" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <DefaultLanguage/>
                                        </div>
                                    }/>
                                    <Route path="/password-change" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <PasswordChange/>
                                        </div>
                                    }/>
                                    <Route path="/delete-account" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <DeleteAccount/>
                                        </div>
                                    }/>
                                    <Route path="/password-forgot" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <PasswordForgot/>
                                        </div>
                                    }/>
                                    <Route path="/password-reset" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <PasswordReset/>
                                        </div>
                                    }/>
                                    <Route path="/investment-calculator" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <InvestmentCalculatorForm/>
                                        </div>
                                    }/>
                                    <Route path="/investment-calculator-results" element={
                                        <div className="flex-grow flex items-center justify-center">
                                            <InvestmentCalculatorResults/>
                                        </div>
                                    }/>
                                </Routes>
                            </div>
                        </CsrfProvider>
                    </AuthProvider>
                </ThemeProvider>
            </LanguageProvider>
        </Router>
    )

I tried commenting out the h1 containing 'Sign in' text because it takes up some space on the screen but it didn't help.

Below you can find screenshots:

screenshot 1

screenshot 2