From 83a92a23c918198fb010cdb906cfc8a1ae38a470 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Wed, 1 Apr 2026 09:29:52 -0400
Subject: [PATCH] fix: tab bar flex layout, search form single-row with
 flex-wrap, View button column wider

---
 app/admin/sync/mimecast/page.tsx | 44 +++++++++++++++-----------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/app/admin/sync/mimecast/page.tsx b/app/admin/sync/mimecast/page.tsx
index 4d93b29..fd1d2c4 100644
--- a/app/admin/sync/mimecast/page.tsx
+++ b/app/admin/sync/mimecast/page.tsx
@@ -1226,41 +1226,39 @@ function DeliveredMailTab() {
           <span className="text-sm font-medium">Search Delivered Mail</span>
           <span className="text-xs text-muted-foreground ml-1">— find messages that passed through Mimecast</span>
         </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
-          <div>
+        <div className="flex flex-wrap gap-3 items-end">
+          <div className="w-40 flex-shrink-0">
             <label className="text-xs text-muted-foreground mb-1 block">Tenant</label>
             <select value={tenantId} onChange={e => { setTenantId(e.target.value); setLoaded(false); setMessages([]); }}
               className="w-full border rounded-md px-3 py-1.5 text-sm bg-background">
               {TENANT_OPTIONS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
             </select>
           </div>
-          <div>
+          <div className="flex-1 min-w-44">
             <label className="text-xs text-muted-foreground mb-1 block">Recipient (to)</label>
             <input type="text" placeholder="user@domain.com" value={to}
               onChange={e => setTo(e.target.value)}
               onKeyDown={e => e.key === 'Enter' && search()}
               className="w-full border rounded-md px-3 py-1.5 text-sm bg-background" />
           </div>
-          <div>
+          <div className="flex-1 min-w-44">
             <label className="text-xs text-muted-foreground mb-1 block">Sender (from)</label>
             <input type="text" placeholder="sender@domain.com" value={from}
               onChange={e => setFrom(e.target.value)}
               onKeyDown={e => e.key === 'Enter' && search()}
               className="w-full border rounded-md px-3 py-1.5 text-sm bg-background" />
           </div>
-          <div>
+          <div className="flex-1 min-w-44">
             <label className="text-xs text-muted-foreground mb-1 block">Subject contains</label>
             <input type="text" placeholder="keyword…" value={subject}
               onChange={e => setSubject(e.target.value)}
               onKeyDown={e => e.key === 'Enter' && search()}
               className="w-full border rounded-md px-3 py-1.5 text-sm bg-background" />
           </div>
-        </div>
-        <div className="flex items-end gap-3 flex-wrap">
-          <div>
+          <div className="w-36 flex-shrink-0">
             <label className="text-xs text-muted-foreground mb-1 block">Time range</label>
             <select value={startHours} onChange={e => setStartHours(Number(e.target.value))}
-              className="border rounded-md px-3 py-1.5 text-sm bg-background">
+              className="w-full border rounded-md px-3 py-1.5 text-sm bg-background">
               <option value={6}>Last 6 hours</option>
               <option value={24}>Last 24 hours</option>
               <option value={48}>Last 48 hours</option>
@@ -1268,14 +1266,14 @@ function DeliveredMailTab() {
               <option value={168}>Last 7 days</option>
             </select>
           </div>
-          <Button onClick={search} disabled={loading || (!to && !from && !subject)} className="gap-2">
+          <Button onClick={search} disabled={loading || (!to && !from && !subject)} className="gap-2 flex-shrink-0">
             {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
             Search
           </Button>
-          {!to && !from && !subject && (
-            <span className="text-xs text-muted-foreground">Enter at least one search field</span>
-          )}
         </div>
+        {!to && !from && !subject && (
+          <p className="text-xs text-muted-foreground">Enter recipient, sender, or subject to search</p>
+        )}
       </div>
 
       {loadError && (
@@ -1354,7 +1352,7 @@ function DeliveredMailTab() {
                   <th className="text-left px-3 py-2 font-medium text-xs">Subject</th>
                   <th style={{width:'90px'}} className="text-left px-3 py-2 font-medium text-xs">Status</th>
                   <th style={{width:'80px'}} className="text-left px-3 py-2 font-medium text-xs">Spam</th>
-                  <th style={{width:'70px'}} className="px-3 py-2"></th>
+                  <th style={{width:'90px'}} className="px-3 py-2"></th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border">
@@ -1476,15 +1474,15 @@ export default function MimecastSyncPage() {
       )}
 
       <Tabs defaultValue="status" className="w-full">
-        <TabsList className="grid w-full max-w-5xl grid-cols-8">
-          <TabsTrigger value="status"     className="gap-1.5"><Activity className="h-4 w-4" />Status</TabsTrigger>
-          <TabsTrigger value="held"       className="gap-1.5"><PauseCircle className="h-4 w-4" />Held Mail</TabsTrigger>
-          <TabsTrigger value="delivered"  className="gap-1.5"><TrendingUp className="h-4 w-4" />Delivered</TabsTrigger>
-          <TabsTrigger value="messages"   className="gap-1.5"><Mail    className="h-4 w-4" />Messages</TabsTrigger>
-          <TabsTrigger value="threats"    className="gap-1.5"><Shield  className="h-4 w-4" />Threats</TabsTrigger>
-          <TabsTrigger value="cloudusers" className="gap-1.5"><Users   className="h-4 w-4" />Cloud Users</TabsTrigger>
-          <TabsTrigger value="history"    className="gap-1.5"><Clock   className="h-4 w-4" />History</TabsTrigger>
-          <TabsTrigger value="schedules"  className="gap-1.5"><Calendar className="h-4 w-4" />Schedules</TabsTrigger>
+        <TabsList className="flex w-full flex-wrap h-auto gap-0">
+          <TabsTrigger value="status"     className="gap-1.5 text-xs"><Activity className="h-3.5 w-3.5" />Status</TabsTrigger>
+          <TabsTrigger value="held"       className="gap-1.5 text-xs"><PauseCircle className="h-3.5 w-3.5" />Held Mail</TabsTrigger>
+          <TabsTrigger value="delivered"  className="gap-1.5 text-xs"><TrendingUp className="h-3.5 w-3.5" />Delivered</TabsTrigger>
+          <TabsTrigger value="messages"   className="gap-1.5 text-xs"><Mail className="h-3.5 w-3.5" />Messages</TabsTrigger>
+          <TabsTrigger value="threats"    className="gap-1.5 text-xs"><Shield className="h-3.5 w-3.5" />Threats</TabsTrigger>
+          <TabsTrigger value="cloudusers" className="gap-1.5 text-xs"><Users className="h-3.5 w-3.5" />Cloud Users</TabsTrigger>
+          <TabsTrigger value="history"    className="gap-1.5 text-xs"><Clock className="h-3.5 w-3.5" />History</TabsTrigger>
+          <TabsTrigger value="schedules"  className="gap-1.5 text-xs"><Calendar className="h-3.5 w-3.5" />Schedules</TabsTrigger>
         </TabsList>
 
         <TabsContent value="status"     className="mt-6">