From 5b09dbff966d6d924d6a6f0c89b6748d2b38bf98 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sat, 18 Jul 2026 06:04:37 -0400
Subject: [PATCH] fix: tighten Headers tab grid layout and wrap long values
 instead of overflowing the card

---
 components/phishing/evidence-card.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/phishing/evidence-card.tsx b/components/phishing/evidence-card.tsx
index 29ea6da..eaefbaa 100644
--- a/components/phishing/evidence-card.tsx
+++ b/components/phishing/evidence-card.tsx
@@ -202,36 +202,36 @@ export function EvidenceCard({ messages, blastRadius }: EvidenceCardProps) {
             </TabsList>
 
             <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="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>{message.headers.from.displayName ?? '—'}</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="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="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="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="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>{message.headers.subject ?? '—'}</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="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>{authBadge(authResults.result.spf)}</span>