fix: table layout with colgroup widths, remove Check icon (was rendering as arrow), clean policy badge colors
This commit is contained in:
parent
d0112ec12e
commit
6c2c8ec25f
1 changed files with 48 additions and 42 deletions
|
|
@ -877,68 +877,74 @@ function HeldMailTab() {
|
|||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<colgroup>
|
||||
<col className="w-28" />
|
||||
<col className="w-44" />
|
||||
<col className="w-48" />
|
||||
<col />
|
||||
<col className="w-36" />
|
||||
<col className="w-32" />
|
||||
</colgroup>
|
||||
<thead className="bg-muted/30">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-2 font-medium">Date</th>
|
||||
<th className="text-left px-4 py-2 font-medium">To</th>
|
||||
<th className="text-left px-4 py-2 font-medium">From</th>
|
||||
<th className="text-left px-4 py-2 font-medium">Subject</th>
|
||||
<th className="text-left px-4 py-2 font-medium">Policy</th>
|
||||
<th className="text-left px-4 py-2 font-medium"></th>
|
||||
<th className="text-left px-3 py-2 font-medium text-xs">Date</th>
|
||||
<th className="text-left px-3 py-2 font-medium text-xs">To</th>
|
||||
<th className="text-left px-3 py-2 font-medium text-xs">From</th>
|
||||
<th className="text-left px-3 py-2 font-medium text-xs">Subject</th>
|
||||
<th className="text-left px-3 py-2 font-medium text-xs">Policy</th>
|
||||
<th className="px-3 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filtered.map((m: any) => (
|
||||
<tr key={m.id} className="hover:bg-muted/20">
|
||||
<td className="px-4 py-2 text-muted-foreground whitespace-nowrap text-xs">
|
||||
<td className="px-3 py-2 text-muted-foreground whitespace-nowrap text-xs">
|
||||
{new Date(m.dateReceived).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-xs">{m.to}</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="font-medium text-xs">{m.fromDisplay || m.from}</div>
|
||||
{m.fromDisplay && <div className="text-xs text-muted-foreground">{m.from}</div>}
|
||||
<td className="px-3 py-2 text-xs truncate max-w-0">
|
||||
<div className="truncate">{m.to}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 max-w-xs">
|
||||
<td className="px-3 py-2">
|
||||
<div className="font-medium text-xs truncate">{m.fromDisplay || m.from}</div>
|
||||
{m.fromDisplay && <div className="text-xs text-muted-foreground truncate">{m.from}</div>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
<div className="truncate">{m.subject || '(no subject)'}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<td className="px-3 py-2">
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
m.policyInfo?.includes('DMARC') || m.policyInfo?.includes('Impersonation')
|
||||
? 'bg-red-500/10 text-red-600'
|
||||
: 'bg-yellow-500/10 text-yellow-700'
|
||||
: 'bg-muted text-muted-foreground'
|
||||
}`}>
|
||||
{m.policyInfo || m.reason || '—'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs gap-1"
|
||||
onClick={() => setAnalysisMessage(m)}
|
||||
>
|
||||
<Info className="w-3 h-3" />
|
||||
Analyze
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs gap-1 text-green-700 border-green-300 hover:bg-green-50"
|
||||
disabled={releasing[m.id]}
|
||||
onClick={() => release(m)}
|
||||
>
|
||||
{releasing[m.id]
|
||||
? <Loader2 className="w-3 h-3 animate-spin" />
|
||||
: <Check className="w-3 h-3" />}
|
||||
Release
|
||||
</Button>
|
||||
</div>
|
||||
{releaseErrors[m.id] && (
|
||||
<span className="text-xs text-red-500">{releaseErrors[m.id]}</span>
|
||||
)}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1 justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 text-xs px-2"
|
||||
onClick={() => setAnalysisMessage(m)}
|
||||
>
|
||||
<Info className="w-3 h-3 mr-1" />
|
||||
Analyze
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs px-2 text-green-700 border-green-300 hover:bg-green-50 dark:hover:bg-green-950/20"
|
||||
disabled={releasing[m.id]}
|
||||
onClick={() => release(m)}
|
||||
>
|
||||
{releasing[m.id] ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : null}
|
||||
Release
|
||||
</Button>
|
||||
</div>
|
||||
{releaseErrors[m.id] && (
|
||||
<div className="text-xs text-red-500 text-right mt-0.5">{releaseErrors[m.id]}</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue