fix: use table-fixed + inline style widths for reliable column sizing, fix truncation

This commit is contained in:
lorentz 2026-04-01 08:05:09 -04:00
parent 90c60d1be7
commit 672d8c52a6

View file

@ -891,23 +891,15 @@ function HeldMailTab() {
</span>
</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>
<table className="w-full text-sm table-fixed">
<thead className="bg-muted/30">
<tr>
<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 style={{width:'120px'}} className="text-left px-3 py-2 font-medium text-xs">Date</th>
<th style={{width:'160px'}} className="text-left px-3 py-2 font-medium text-xs">To</th>
<th style={{width:'180px'}} 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>
<th style={{width:'160px'}} className="text-left px-3 py-2 font-medium text-xs">Policy</th>
<th style={{width:'160px'}} className="px-3 py-2"></th>
</tr>
</thead>
<tbody className="divide-y divide-border">
@ -916,17 +908,17 @@ function HeldMailTab() {
<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-3 py-2 text-xs truncate max-w-0">
<td className="px-3 py-2 text-xs" style={{overflow:'hidden'}}>
<div className="truncate">{m.to}</div>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2" style={{overflow:'hidden'}}>
<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">
<td className="px-3 py-2 text-xs" style={{overflow:'hidden'}}>
<div className="truncate">{m.subject || '(no subject)'}</div>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2" style={{overflow:'hidden'}}>
<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'
@ -940,7 +932,7 @@ function HeldMailTab() {
<Button
size="sm"
variant="ghost"
className="h-7 text-xs px-2"
className="h-7 text-xs px-2 whitespace-nowrap"
onClick={() => setAnalysisMessage(m)}
>
<Info className="w-3 h-3 mr-1" />
@ -949,7 +941,7 @@ function HeldMailTab() {
<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"
className="h-7 text-xs px-2 whitespace-nowrap text-green-700 border-green-300 hover:bg-green-50 dark:hover:bg-green-950/20"
disabled={releasing[m.id]}
onClick={() => release(m)}
>