diff options
| -rw-r--r-- | makima/frontend/src/components/history/HistoryFilters.tsx | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/makima/frontend/src/components/history/HistoryFilters.tsx b/makima/frontend/src/components/history/HistoryFilters.tsx index a1a4945..898d30b 100644 --- a/makima/frontend/src/components/history/HistoryFilters.tsx +++ b/makima/frontend/src/components/history/HistoryFilters.tsx @@ -22,14 +22,14 @@ export function HistoryFilters({ totalCount, }: HistoryFiltersProps) { return ( - <div className="shrink-0 flex items-center gap-4 p-3 border border-[rgba(117,170,252,0.15)] bg-[rgba(0,0,0,0.2)]"> + <div className="shrink-0 flex flex-wrap items-center gap-4 p-3 border border-[rgba(117,170,252,0.15)] bg-[rgba(0,0,0,0.2)] overflow-hidden"> {/* Contract filter */} - <div className="flex items-center gap-2"> - <label className="font-mono text-[10px] text-[#7788aa] uppercase">Contract</label> + <div className="flex items-center gap-2 min-w-0"> + <label className="font-mono text-[10px] text-[#7788aa] uppercase shrink-0">Contract</label> <select value={selectedContractId || ""} onChange={(e) => onContractChange(e.target.value || null)} - className="font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-2 py-1 focus:border-[#3f6fb3] focus:outline-none min-w-[150px]" + className="font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-2 py-1 focus:border-[#3f6fb3] focus:outline-none min-w-[150px] max-w-[300px] truncate" > <option value="">All Contracts</option> {contracts.map((contract) => ( @@ -41,8 +41,8 @@ export function HistoryFilters({ </div> {/* Date range */} - <div className="flex items-center gap-2"> - <label className="font-mono text-[10px] text-[#7788aa] uppercase">From</label> + <div className="flex items-center gap-2 shrink-0"> + <label className="font-mono text-[10px] text-[#7788aa] uppercase shrink-0">From</label> <input type="date" value={dateFrom} @@ -51,8 +51,8 @@ export function HistoryFilters({ /> </div> - <div className="flex items-center gap-2"> - <label className="font-mono text-[10px] text-[#7788aa] uppercase">To</label> + <div className="flex items-center gap-2 shrink-0"> + <label className="font-mono text-[10px] text-[#7788aa] uppercase shrink-0">To</label> <input type="date" value={dateTo} @@ -69,14 +69,14 @@ export function HistoryFilters({ onDateFromChange(""); onDateToChange(""); }} - className="font-mono text-[10px] text-[#7788aa] hover:text-[#9bc3ff] uppercase transition-colors" + className="font-mono text-[10px] text-[#7788aa] hover:text-[#9bc3ff] uppercase transition-colors shrink-0" > Clear Filters </button> )} {/* Result count */} - <div className="ml-auto font-mono text-[10px] text-[#556677]"> + <div className="ml-auto font-mono text-[10px] text-[#556677] shrink-0 whitespace-nowrap"> {totalCount} event{totalCount !== 1 ? "s" : ""} </div> </div> |