From de3db4bd09010986ac9e475fce0c18ce8b54a2fb Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 8 Sep 2026 01:31:00 -0400
Subject: [PATCH] fix(missions): stack hero content in flow on mobile and move
 attendance above details on small screens

---
 .../intelligence/missions/[id]/page.tsx       | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/app/(frontend)/intelligence/missions/[id]/page.tsx b/src/app/(frontend)/intelligence/missions/[id]/page.tsx
index b0f298a..a7ffb97 100644
--- a/src/app/(frontend)/intelligence/missions/[id]/page.tsx
+++ b/src/app/(frontend)/intelligence/missions/[id]/page.tsx
@@ -241,9 +241,19 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
     })),
   };
 
+  const attendanceCard = (
+    <MissionAttendance
+      missionId={mission.id}
+      currentUserId={currentUser ? (currentUser.id as number) : null}
+      currentResponse={currentResponse}
+      attendanceClosed={attendanceClosed}
+      {...attendanceProps}
+    />
+  );
+
   return (
     <div className="flex flex-col">
-      <header className="relative min-h-[500px] w-full overflow-hidden bg-background">
+      <header className="relative flex min-h-[500px] w-full flex-col overflow-hidden bg-background">
         <div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
           <Link
             href="/intelligence/missions"
@@ -266,32 +276,31 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
         <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
         <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
 
-        <div className="absolute top-4 right-4 z-20 flex gap-2">
-          <span
-            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
-          >
-            {mission.ownershipAndStatus.status}
-          </span>
-          <span
-            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
-          >
-            {operationTypeLabels[mission.operationType] ?? mission.operationType}
-          </span>
-        </div>
-
-        <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10 lg:p-12">
+        <div className="relative z-10 mt-auto flex flex-col px-5 pb-6 pt-14 md:absolute md:inset-0 md:justify-end md:px-10 md:py-10 lg:px-12">
           <div className="mx-auto flex w-full max-w-7xl flex-col">
+            <div className="z-20 mb-4 flex flex-wrap gap-2 md:absolute md:top-4 md:right-4 md:mb-0">
+              <span
+                className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
+              >
+                {mission.ownershipAndStatus.status}
+              </span>
+              <span
+                className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
+              >
+                {operationTypeLabels[mission.operationType] ?? mission.operationType}
+              </span>
+            </div>
             <div className="flex items-center gap-2 font-mono text-sm uppercase tracking-widest text-white/60">
               <CrosshairIcon className="size-4" />
               <span>{mission.codeName}</span>
             </div>
             <h1
               id="mission-title"
-              className="mt-3 text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
+              className="mt-3 text-4xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
             >
               {mission.name}
             </h1>
-            <p className="mt-2 max-w-3xl text-lg leading-relaxed text-white/80">
+            <p className="mt-2 max-w-3xl text-base leading-relaxed text-white/80 md:text-lg">
               {mission.summary}
             </p>
 
@@ -367,6 +376,8 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
       </header>
 
       <div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
+        {/* Attendance sits right under the hero on stacked (below-xl) layouts */}
+        <div className="xl:hidden">{attendanceCard}</div>
         <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
           {/* ── Main Content (2/3) ──────────────────────────── */}
           <div className="xl:col-span-2 flex flex-col gap-6">
@@ -472,13 +483,7 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
               />
             )}
 
-            <MissionAttendance
-              missionId={mission.id}
-              currentUserId={currentUser ? (currentUser.id as number) : null}
-              currentResponse={currentResponse}
-              attendanceClosed={attendanceClosed}
-              {...attendanceProps}
-            />
+            <div className="hidden xl:block">{attendanceCard}</div>
 
             {/* Campaign Card */}
             {campaign && (