fix: tighten Headers tab grid layout and wrap long values instead of overflowing the card
This commit is contained in:
parent
a30d72e9ba
commit
5b09dbff96
1 changed files with 9 additions and 9 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue