mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 13:01:00 +00:00
fix(auth): lift the register submit button and add a branded not-found page
Promote the register page's submit button to the 44 px tap-target floor (size="lg" + min-h-11 + w-full) so the primary action stays finger-tap reachable on a narrow viewport. Add a new branded not-found.tsx page. The previous implicit fallback was Next.js's bare framework text; this introduces a lighter wrapper than ErrorDetails (404 is not an application error) — Logo, headline, explanatory paragraph, and a single "Back to dashboard" link. The wrapper carries min-h-dvh and safe-area-inset-top so the panel anchors centred under iOS Safari's animated URL bar and stays clear of the notch. Apply the same dvh + safe-area pattern on the root-layout global error boundary and lift its inline button heights to 44 px. Wrap the ErrorDetails panel in a min-h-dvh flex column so server-error pages also centre instead of hugging the notch.
This commit is contained in:
1 parent
fc8a58557a
commit
de0c16338f
4 files changed
+81
-8
No files matched your search
@@ -153,7 +153,16 @@ export default function RegisterPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{/* v1.4.27 MB6 — lift the submit to the 44 px tap-target
|
||||
floor and the `lg` size so the primary action stays
|
||||
reachable on a narrow viewport without falling under the
|
||||
iOS keyboard's accessory bar. */}
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="min-h-11 w-full"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
|
||||
) : (
|
||||
|
||||
@@ -40,11 +40,17 @@ export default function GlobalError({
|
||||
backgroundColor: "#1e1f29",
|
||||
color: "#f8f8f2",
|
||||
margin: 0,
|
||||
minHeight: "100vh",
|
||||
// v1.4.27 MB6 — `100dvh` follows the dynamic viewport on
|
||||
// iOS Safari (URL-bar collapse) so the wrapper still
|
||||
// anchors centred when the browser chrome animates in or
|
||||
// out. `safe-area-inset-top` keeps the headline out from
|
||||
// under the notch / Dynamic Island.
|
||||
minHeight: "100dvh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "24px",
|
||||
padding:
|
||||
"calc(env(safe-area-inset-top, 0px) + 24px) 24px 24px 24px",
|
||||
}}
|
||||
>
|
||||
<div style={{ maxWidth: 560 }}>
|
||||
@@ -76,9 +82,13 @@ export default function GlobalError({
|
||||
color: "#282a36",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
padding: "8px 14px",
|
||||
// v1.4.27 MB6 — 44 px minimum height matches the
|
||||
// app-wide tap-target floor; the larger inline padding
|
||||
// keeps the labels comfortably finger-tap-sized.
|
||||
minHeight: 44,
|
||||
padding: "10px 16px",
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
@@ -91,9 +101,10 @@ export default function GlobalError({
|
||||
color: "#f8f8f2",
|
||||
border: "1px solid #44475a",
|
||||
borderRadius: 6,
|
||||
padding: "8px 14px",
|
||||
minHeight: 44,
|
||||
padding: "10px 16px",
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
Copy details
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { Logo } from "@/components/ui/logo";
|
||||
|
||||
/**
|
||||
* v1.4.27 MB6 — branded 404 page. Next.js mounts this file for any
|
||||
* route that doesn't resolve to a server component, so the previous
|
||||
* implicit fallback was the framework's bare "404" text. The shape
|
||||
* here intentionally stays lighter than `<ErrorDetails>` — Decision L
|
||||
* in the v1.4.27 mobile-fix plan — because a missing URL is not an
|
||||
* application error and doesn't need the bug-report path. Just a
|
||||
* branded splash with one link home.
|
||||
*
|
||||
* Mobile-first: `min-h-dvh` follows the dynamic viewport so the
|
||||
* panel anchors centred under iOS Safari's animated URL bar;
|
||||
* `safe-area-inset-top` keeps the headline clear of the notch or
|
||||
* Dynamic Island.
|
||||
*/
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main
|
||||
id="main-content"
|
||||
className="bg-background text-foreground flex min-h-dvh flex-col items-center justify-center gap-6 px-4 py-12 pt-[calc(env(safe-area-inset-top)+3rem)]"
|
||||
>
|
||||
<div className="bg-primary/10 flex h-14 w-14 items-center justify-center rounded-xl">
|
||||
<Logo className="text-primary" size={32} />
|
||||
</div>
|
||||
<div className="max-w-sm space-y-2 text-center">
|
||||
<p className="text-muted-foreground text-xs tracking-wider uppercase">
|
||||
404
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight md:text-3xl">
|
||||
Page not found
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
The page you were looking for doesn't exist or has been moved.
|
||||
Head back to the dashboard to pick up where you left off.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex min-h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors"
|
||||
>
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -74,7 +74,12 @@ export function ErrorDetails({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-xl space-y-4 p-6">
|
||||
// v1.4.27 MB6 — `min-h-dvh flex flex-col justify-center` makes
|
||||
// the error panel anchor in the middle of the available viewport
|
||||
// even when this component is mounted at the root layout. Without
|
||||
// it the panel hugged the top edge under the notch on
|
||||
// small-screen devices.
|
||||
<div className="mx-auto flex min-h-dvh w-full max-w-xl flex-col justify-center space-y-4 p-6">
|
||||
<h1 className="text-xl font-semibold">{t("errorBoundary.title")}</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("errorBoundary.description")}
|
||||
|
||||
Reference in new issue
Block a user