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:
You need to sign in to view this answers
Leave feedback about this