1
0
Fork 0

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
This commit is contained in:
Jason Fraley 2026-09-10 20:03:39 -04:00
parent f0af778713
commit 09ed08caf3
3 changed files with 27 additions and 19 deletions

View file

@ -1,3 +1,4 @@
import Link from "next/link";
import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
import { import {
MissionCard, MissionCard,
@ -7,24 +8,31 @@ import { CrosshairIcon } from "lucide-react";
interface MissionBriefingProps { interface MissionBriefingProps {
readonly mission: MissionCardProps["mission"] | null; readonly mission: MissionCardProps["mission"] | null;
readonly heading?: string;
} }
export function MissionBriefing({ mission }: MissionBriefingProps) { export function MissionBriefing({ mission, heading = "Next Mission" }: MissionBriefingProps) {
if (!mission) {
return ( return (
<Item variant="outline"> <Item variant="outline" className="items-start content-start">
<ItemHeader> <ItemHeader>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CrosshairIcon className="size-4 text-muted-foreground" /> <CrosshairIcon className="size-4 text-muted-foreground" />
<ItemTitle>Mission Briefing</ItemTitle> <ItemTitle>{heading}</ItemTitle>
</div> </div>
<Link
href="/intelligence/missions"
className="text-xs text-muted-foreground transition-colors hover:text-primary"
>
View all
</Link>
</ItemHeader> </ItemHeader>
<ItemContent> <ItemContent>
{mission ? (
<MissionCard mission={mission} showFullDetails />
) : (
<p className="text-sm text-muted-foreground italic">No missions currently scheduled.</p> <p className="text-sm text-muted-foreground italic">No missions currently scheduled.</p>
)}
</ItemContent> </ItemContent>
</Item> </Item>
); );
}
return <MissionCard mission={mission} showFullDetails={true} />;
} }

View file

@ -20,7 +20,7 @@ export function ProfileSummary({
assignments, assignments,
}: ProfileSummaryProps) { }: ProfileSummaryProps) {
return ( return (
<Item variant="outline"> <Item variant="outline" className="items-start content-start">
<ItemHeader> <ItemHeader>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserIcon className="size-4 text-muted-foreground" /> <UserIcon className="size-4 text-muted-foreground" />

View file

@ -102,7 +102,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="item-content" 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} {...props}
/> />
); );