fix: tab bar flex layout, search form single-row with flex-wrap, View button column wider

This commit is contained in:
lorentz 2026-04-01 09:29:52 -04:00
parent 8e28062d85
commit 83a92a23c9

View file

@ -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">