From d476761f2271b8cc34b0a6080934cc02f2418256 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Sat, 6 Dec 2025 23:26:07 -0300
Subject: [PATCH] Improve USB policy filters layout and sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use grid layout with 2 columns for better space usage
- Increase filter height to h-9 for better readability
- Move "Limpar" button to header row
- Add proper padding and spacing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../admin/devices/usb-policy-control.tsx      | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/components/admin/devices/usb-policy-control.tsx b/src/components/admin/devices/usb-policy-control.tsx
index e758ed7..5ab6a23 100644
--- a/src/components/admin/devices/usb-policy-control.tsx
+++ b/src/components/admin/devices/usb-policy-control.tsx
@@ -385,44 +385,46 @@ export function UsbPolicyControl({
         {showHistory && (
           <div className="mt-3 space-y-3">
             {/* Filtros */}
-            <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-slate-50/80 p-2">
-              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <div className="space-y-2 rounded-lg border bg-slate-50/80 p-3">
+              <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                 <Filter className="size-3.5" />
-                <span>Filtros:</span>
+                <span>Filtros</span>
+                {hasActiveFilters && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="ml-auto h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    onClick={handleResetFilters}
+                  >
+                    <RotateCcw className="size-3" />
+                    Limpar
+                  </Button>
+                )}
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="Status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {STATUS_FILTER_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <DateRangeButton
+                  from={dateFrom}
+                  to={dateTo}
+                  onChange={({ from, to }) => {
+                    setDateFrom(from)
+                    setDateTo(to)
+                  }}
+                  className="h-9"
+                  clearLabel="Limpar"
+                />
               </div>
-              <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <SelectTrigger className="h-7 w-[130px] text-xs">
-                  <SelectValue placeholder="Status" />
-                </SelectTrigger>
-                <SelectContent>
-                  {STATUS_FILTER_OPTIONS.map((opt) => (
-                    <SelectItem key={opt.value} value={opt.value} className="text-xs">
-                      {opt.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <DateRangeButton
-                from={dateFrom}
-                to={dateTo}
-                onChange={({ from, to }) => {
-                  setDateFrom(from)
-                  setDateTo(to)
-                }}
-                className="h-7 text-xs"
-                clearLabel="Limpar período"
-              />
-              {hasActiveFilters && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
-                  onClick={handleResetFilters}
-                >
-                  <RotateCcw className="size-3" />
-                  Limpar
-                </Button>
-              )}
             </div>
 
             {/* Lista de eventos */}