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:
Marc-André Bombeck committed 2026-05-15 18:58:35 +02:00
1 parent fc8a58557a
commit de0c16338f
4 files changed
+81 -8

No files matched your search

+10 -1
View File
@@ -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" />
) : (
+17 -6
View File
@@ -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
+48
View File
@@ -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&apos;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>
);
}
+6 -1
View File
@@ -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")}