fix: tighten Headers tab grid layout and wrap long values instead of overflowing the card

This commit is contained in:
lorentz 2026-07-18 06:04:37 -04:00
parent a30d72e9ba
commit 5b09dbff96

View file

@ -202,36 +202,36 @@ export function EvidenceCard({ messages, blastRadius }: EvidenceCardProps) {
</TabsList> </TabsList>
<TabsContent value="headers"> <TabsContent value="headers">
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm"> <div className="grid grid-cols-[8rem_minmax(0,1fr)] gap-x-4 gap-y-2 text-sm">
<span className="text-muted-foreground">From</span> <span className="text-muted-foreground">From</span>
<span className="font-mono text-xs">{message.headers.from.email ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.from.email ?? '—'}</span>
<span className="text-muted-foreground">Display name</span> <span className="text-muted-foreground">Display name</span>
<span>{message.headers.from.displayName ?? '—'}</span> <span>{message.headers.from.displayName ?? '—'}</span>
<span className="text-muted-foreground">Sender domain</span> <span className="text-muted-foreground">Sender domain</span>
<span className="font-mono text-xs">{message.headers.from.domain ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.from.domain ?? '—'}</span>
<span className="text-muted-foreground">Reply-To</span> <span className="text-muted-foreground">Reply-To</span>
<span className="font-mono text-xs">{message.headers.replyTo ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.replyTo ?? '—'}</span>
<span className="text-muted-foreground">Return-Path</span> <span className="text-muted-foreground">Return-Path</span>
<span className="font-mono text-xs">{message.headers.returnPath ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.returnPath ?? '—'}</span>
<span className="text-muted-foreground">To</span> <span className="text-muted-foreground">To</span>
<span className="font-mono text-xs">{message.headers.to.join(', ') || '—'}</span> <span className="font-mono text-xs break-all">{message.headers.to.join(', ') || '—'}</span>
<span className="text-muted-foreground">Cc</span> <span className="text-muted-foreground">Cc</span>
<span className="font-mono text-xs">{message.headers.cc.join(', ') || '—'}</span> <span className="font-mono text-xs break-all">{message.headers.cc.join(', ') || '—'}</span>
<span className="text-muted-foreground">Subject</span> <span className="text-muted-foreground">Subject</span>
<span>{message.headers.subject ?? '—'}</span> <span>{message.headers.subject ?? '—'}</span>
<span className="text-muted-foreground">Date</span> <span className="text-muted-foreground">Date</span>
<span className="font-mono text-xs">{message.headers.date ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.date ?? '—'}</span>
<span className="text-muted-foreground">Message-ID</span> <span className="text-muted-foreground">Message-ID</span>
<span className="font-mono text-xs truncate">{message.headers.messageId ?? '—'}</span> <span className="font-mono text-xs break-all">{message.headers.messageId ?? '—'}</span>
<span className="text-muted-foreground">SPF</span> <span className="text-muted-foreground">SPF</span>
<span>{authBadge(authResults.result.spf)}</span> <span>{authBadge(authResults.result.spf)}</span>