Почему моя мобильная форма требует прокрутки, несмотря на достаточно места на экране? ⇐ CSS

[Anonymous]

Я написал полнофункциональное приложение с интерфейсом React. Я использую DaisyUI и Tailwind для CSS. Мое приложение развернуто и доступно по адресу https://cashflash.app
Приложение корректно отображается в браузерах настольных компьютеров. Однако на мобильных устройствах (проверено на iPhone 12 mini и iPhone XR) форма входа (и все остальные, я выбрал эту в качестве примера) по пути /sign-in не видна полностью без прокрутки. У меня была та же проблема на моем ноутбуке, которую я решил, изменив min-h-screen на h-full в div-оболочке формы.
Ниже приведен код:
Signin.tsx

Код: Выделить всё

return (

{/*{t.signin.signin}*/}
{alertType && (

)}

 setEmail(e.target.value)}/>
 setPassword(e.target.value)}/>
[*]                      className="mt-2 text-blue-500 hover:text-blue-700">{t.signin.forgotPassword}



PATH HERE

{t.signin.signInWithGoogle}


{t.signin.noAccount}
{t.signin.signup}



);

Navbar.tsx

Код: Выделить всё

return (


 handleLogo()}>

PATH HERE

Cashflash





PATH HERE


PATH HERE





PATH HERE


PATH HERE


{!isSignedIn ? (



) : (




PATH HERE



[list]                            className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52">
{t.navbar.settings}
[*]{t.navbar.signout}
[/list]

)}





PATH HERE


PATH HERE






PATH HERE



[list]                        className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52 z-50">
{!isSignedIn ? (

[*]{t.navbar.signin}
[*]PL / EN

) : (


[*]{t.navbar.settings}
[*]{t.navbar.signout}
[*]PL / EN
[/list]

)}




);

App.tsx

Код: Выделить всё

return (




























)

Я попробовал закомментировать h1, содержащий текст «Войти», потому что он занимает немного места на экране, но это не помогло.
Ниже вы можете найти скриншоты:
скриншот 1
скриншот 2

Подробнее здесь: https://stackoverflow.com/questions/791 ... reen-space