Fix overflow on history page filter bar

- Add max-width constraint (300px) to contract select dropdown
- Add flex-wrap to filter container to handle narrow viewports
- Add overflow-hidden to prevent filter bar from causing page overflow
- Add shrink-0 to date inputs and labels to prevent unwanted shrinking
- Add whitespace-nowrap to event count to keep it on single line

Prevents long contract names from causing the filter bar to overflow
and push date inputs outside the page boundaries.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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>