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:
parent
f0af778713
commit
09ed08caf3
3 changed files with 27 additions and 19 deletions
|
|
@ -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} />;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue