Admin filter fixes

react-openapi/components/FilterBar.tsx

@@ -71,26 +71,11 @@ function renderFilterInput(
   if (filterType === "number-range") {
     const rangeVal = (value as { min?: string; max?: string }) || {};
     return (
-      <Box key={fieldName} sx={{ display: "flex", gap: 1, alignItems: "center" }}>
+      <Box sx={{ display: "flex", gap: 1 }}>
-        <Typography variant="caption" sx={{ minWidth: 80, color: "text.secondary" }}>
+        <TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
-          {field.label}
+          onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
-        </Typography>
+        <TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
-        <TextField
+          onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
-          type="number"
-          placeholder="Min"
-          size="small"
-          value={rangeVal.min ?? ""}
-          onChange={(e) => onChange("min", e.target.value || undefined)}
-          sx={{ width: 120 }}
-        />
-        <TextField
-          type="number"
-          placeholder="Max"
-          size="small"
-          value={rangeVal.max ?? ""}
-          onChange={(e) => onChange("max", e.target.value || undefined)}
-          sx={{ width: 120 }}
-        />
       </Box>
     );
   }
@@ -98,64 +83,25 @@ function renderFilterInput(
   if (filterType === "date-range") {
     const rangeVal = (value as { start?: string; end?: string }) || {};
     return (
-      <Box key={fieldName} sx={{ display: "flex", gap: 1, alignItems: "center" }}>
+      <Box sx={{ display: "flex", gap: 1 }}>
-        <Typography variant="caption" sx={{ minWidth: 80, color: "text.secondary" }}>
+        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
-          {field.label}
+          onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-        </Typography>
+        <TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
-        <TextField
+          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-          type="datetime-local"
-          placeholder="From"
-          size="small"
-          value={rangeVal.start ?? ""}
-          onChange={(e) => onChange("start", e.target.value || undefined)}
-          InputLabelProps={{ shrink: true }}
-          sx={{ width: 190 }}
-        />
-        <TextField
-          type="datetime-local"
-          placeholder="To"
-          size="small"
-          value={rangeVal.end ?? ""}
-          onChange={(e) => onChange("end", e.target.value || undefined)}
-          InputLabelProps={{ shrink: true }}
-          sx={{ width: 190 }}
-        />
       </Box>
     );
   }
 
-  if (filterType === "multiselect") {
-    const selected = Array.isArray(value) ? value : [];
-    return (
-      <Autocomplete
-        key={fieldName}
-        multiple
-        options={options}
-        value={selected}
-        onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
-        renderInput={(params) => (
-          <TextField {...params} label={field.label} size="small" />
-        )}
-        sx={{ minWidth: 220 }}
-        size="small"
-      />
-    );
-  }
-
   const selected = Array.isArray(value) ? value : [];
   return (
     <Autocomplete
-      key={fieldName}
       multiple
+      freeSolo
       options={options}
       value={selected}
       onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
-      ChipProps={{ size: 'small' }}
+      renderInput={(params) => <TextField {...params} placeholder={`Add ${field.label}...`} />}
-      renderInput={(params) => (
+      sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
-        <TextField {...params} label={field.label} size="small" />
-      )}
-      sx={{ minWidth: 220 }}
-      size="small"
     />
   );
 }
@@ -249,20 +195,23 @@ export default function FilterBar({
               const raw = draft[fieldName];
 
               return (
-                <React.Fragment key={fieldName}>
+                <Box key={fieldName} sx={{ display: "flex", flexDirection: "column", flex: 1, minWidth: { sm: 200 } }}>
+                  <Box sx={{ typography: "caption", mb: 0.5, color: "text.secondary" }}>
+                    {field.label}
+                  </Box>
                   {renderFilterInput(fieldName, field, options, raw, (key, val) =>
                     updateDraft(fieldName, key, val)
                   )}
-                </React.Fragment>
+                </Box>
               );
             })}
           </Box>
 
           <Box sx={{ mt: 2, display: "flex", gap: 1 }}>
-            <Button variant="contained" size="small" onClick={handleApply}>
+            <Button variant="contained" onClick={handleApply}>
               Apply
             </Button>
-            <Button variant="outlined" size="small" onClick={handleClear}>
+            <Button variant="outlined" onClick={handleClear}>
               Clear
             </Button>
           </Box>