From 6c2c8ec25f5e29d814aa89d2645632143cc11a2d Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Wed, 1 Apr 2026 07:38:46 -0400
Subject: [PATCH] fix: table layout with colgroup widths, remove Check icon
 (was rendering as arrow), clean policy badge colors

---
 app/admin/sync/mimecast/page.tsx | 90 +++++++++++++++++---------------
 1 file changed, 48 insertions(+), 42 deletions(-)

diff --git a/app/admin/sync/mimecast/page.tsx b/app/admin/sync/mimecast/page.tsx
index afb35bc..bd16814 100644
--- a/app/admin/sync/mimecast/page.tsx
+++ b/app/admin/sync/mimecast/page.tsx
@@ -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>
                 ))}