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 {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue