From de0c16338fbe18f6359d00ccf955060f5cf9661e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 18:58:35 +0200
Subject: [PATCH] fix(auth): lift the register submit button and add a branded
 not-found page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/auth/register/page.tsx   | 11 +++++++-
 src/app/global-error.tsx         | 23 +++++++++++----
 src/app/not-found.tsx            | 48 ++++++++++++++++++++++++++++++++
 src/components/error-details.tsx |  7 ++++-
 4 files changed, 81 insertions(+), 8 deletions(-)
 create mode 100644 src/app/not-found.tsx

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index f922648a1..d52fb3211 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -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" />
             ) : (
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 3852ce934..5522f4b34 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -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
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 000000000..8138b0d63
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -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>
+  );
+}
diff --git a/src/components/error-details.tsx b/src/components/error-details.tsx
index 1653a8c14..7e0ba8a72 100644
--- a/src/components/error-details.tsx
+++ b/src/components/error-details.tsx
@@ -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")}