fix: tab bar flex layout, search form single-row with flex-wrap, View button column wider
This commit is contained in:
parent
8e28062d85
commit
83a92a23c9
1 changed files with 21 additions and 23 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue