From 09ed08caf34ac9263bdf6f1fc27b40e66ea13c33 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Thu, 10 Sep 2026 20:03:39 -0400
Subject: [PATCH] fix(dashboard): make stretched cards fill cells and truncate
 instead of overflowing

- Widget wrappers use flex-1 with a min-w-0 chain so cards stay at their
  grid-cell width instead of shrinking to content or overflowing it
- ItemContent gains min-w-0 so nowrap text ellipsizes inside the card
  (notifications, campaigns, tickets) rather than clipping at the viewport
- Stretched Service Summary and Mission Briefing top-pack their content;
  Mission Briefing header flips between Next Mission and Last Mission
---
 .../frontend/dashboard/MissionBriefing.tsx    | 42 +++++++++++--------
 .../frontend/dashboard/ProfileSummary.tsx     |  2 +-
 src/components/ui/item.tsx                    |  2 +-
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/frontend/dashboard/MissionBriefing.tsx b/src/components/frontend/dashboard/MissionBriefing.tsx
index 70e610b..a2c6a9f 100644
--- a/src/components/frontend/dashboard/MissionBriefing.tsx
+++ b/src/components/frontend/dashboard/MissionBriefing.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
 import {
   MissionCard,
@@ -7,24 +8,31 @@ import { CrosshairIcon } from "lucide-react";
 
 interface MissionBriefingProps {
   readonly mission: MissionCardProps["mission"] | null;
+  readonly heading?: string;
 }
 
-export function MissionBriefing({ mission }: MissionBriefingProps) {
-  if (!mission) {
-    return (
-      <Item variant="outline">
-        <ItemHeader>
-          <div className="flex items-center gap-2">
-            <CrosshairIcon className="size-4 text-muted-foreground" />
-            <ItemTitle>Mission Briefing</ItemTitle>
-          </div>
-        </ItemHeader>
-        <ItemContent>
+export function MissionBriefing({ mission, heading = "Next Mission" }: MissionBriefingProps) {
+  return (
+    <Item variant="outline" className="items-start content-start">
+      <ItemHeader>
+        <div className="flex items-center gap-2">
+          <CrosshairIcon className="size-4 text-muted-foreground" />
+          <ItemTitle>{heading}</ItemTitle>
+        </div>
+        <Link
+          href="/intelligence/missions"
+          className="text-xs text-muted-foreground transition-colors hover:text-primary"
+        >
+          View all
+        </Link>
+      </ItemHeader>
+      <ItemContent>
+        {mission ? (
+          <MissionCard mission={mission} showFullDetails />
+        ) : (
           <p className="text-sm text-muted-foreground italic">No missions currently scheduled.</p>
-        </ItemContent>
-      </Item>
-    );
-  }
-
-  return <MissionCard mission={mission} showFullDetails={true} />;
+        )}
+      </ItemContent>
+    </Item>
+  );
 }
diff --git a/src/components/frontend/dashboard/ProfileSummary.tsx b/src/components/frontend/dashboard/ProfileSummary.tsx
index 0cc5968..248c625 100644
--- a/src/components/frontend/dashboard/ProfileSummary.tsx
+++ b/src/components/frontend/dashboard/ProfileSummary.tsx
@@ -20,7 +20,7 @@ export function ProfileSummary({
   assignments,
 }: ProfileSummaryProps) {
   return (
-    <Item variant="outline">
+    <Item variant="outline" className="items-start content-start">
       <ItemHeader>
         <div className="flex items-center gap-2">
           <UserIcon className="size-4 text-muted-foreground" />
diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx
index ab3b431..fc496f4 100644
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -102,7 +102,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-content"
-      className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+      className={cn("flex min-w-0 flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
       {...props}
     />
   );