From 373e50ba045691148a755229970b98d8da62e7c4 Mon Sep 17 00:00:00 2001
From: August Cayzer <a@cyzr.me>
Date: Wed, 21 Oct 2026 17:19:15 +0100
Subject: [PATCH] fix(site): one error page on both sites, with the primary
 action on the right

---
 src/components/error-page.tsx          | 17 +++++++-------
 src/status/components/status-error.tsx | 32 ++++++++------------------
 2 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/error-page.tsx b/src/components/error-page.tsx
index af2330d6..774dd880 100644
--- a/src/components/error-page.tsx
+++ b/src/components/error-page.tsx
@@ -34,16 +34,11 @@ export function ErrorPage({
       <p className="mt-3 max-w-md text-[0.9375rem] leading-relaxed text-fd-muted-foreground">{message}</p>
       <div className="mt-6 flex flex-wrap justify-center gap-2">
         {/*
-          A real navigation rather than a reload handler. This component renders
+          Real navigations rather than a reload handler. This component renders
           inside a boundary that may itself have failed to hydrate, and an
-          anchor works with no JavaScript running at all.
+          anchor works with no JavaScript running at all. The primary action
+          comes last, on the right, as on the console and the website.
         */}
-        <a
-          href={primaryHref}
-          className="inline-flex h-8 items-center rounded-md bg-fd-primary px-3 text-[0.8125rem] font-medium text-fd-primary-foreground transition-opacity duration-150 hover:opacity-85"
-        >
-          {primaryLabel}
-        </a>
         {secondaryHref && secondaryLabel ? (
           <a
             href={secondaryHref}
@@ -52,6 +47,12 @@ export function ErrorPage({
             {secondaryLabel}
           </a>
         ) : null}
+        <a
+          href={primaryHref}
+          className="inline-flex h-8 items-center rounded-md bg-fd-primary px-3 text-[0.8125rem] font-medium text-fd-primary-foreground transition-opacity duration-150 hover:opacity-85"
+        >
+          {primaryLabel}
+        </a>
       </div>
     </div>
   );
diff --git a/src/status/components/status-error.tsx b/src/status/components/status-error.tsx
index 1c0554b9..c935a116 100644
--- a/src/status/components/status-error.tsx
+++ b/src/status/components/status-error.tsx
@@ -31,32 +31,18 @@ export function StatusError({ error }: ErrorComponentProps) {
   );
 }
 
-/** An unknown path on the status page. It had none of its own before. */
+/** An unknown path on the status page. */
 export function StatusNotFound() {
   return (
     <HomeLayout {...baseOptions()}>
-      <div className="mx-auto flex w-full max-w-3xl grow flex-col items-center justify-center px-4 py-20 text-center">
-        <h1 className="text-2xl font-semibold tracking-tight text-fd-foreground sm:text-3xl">
-          Page not found
-        </h1>
-        <p className="mt-3 max-w-md text-sm text-fd-muted-foreground">
-          This site carries the current status of Marfa and nothing else.
-        </p>
-        <div className="mt-6 flex flex-wrap justify-center gap-3">
-          <a
-            href="/"
-            className="rounded-lg bg-fd-primary px-4 py-2 text-sm font-medium text-fd-primary-foreground hover:opacity-90"
-          >
-            Current status
-          </a>
-          <a
-            href={DOCS_URL}
-            className="rounded-lg border border-fd-border px-4 py-2 text-sm font-medium text-fd-foreground hover:bg-fd-accent"
-          >
-            Documentation
-          </a>
-        </div>
-      </div>
+      <ErrorPage
+        title="Page not found"
+        message="This site carries the current status of Marfa and nothing else."
+        primaryHref="/"
+        primaryLabel="Current status"
+        secondaryHref={DOCS_URL}
+        secondaryLabel="Documentation"
+      />
     </HomeLayout>
   );
 }