diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 0e11bc237..adaad7849 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -11,6 +11,7 @@ import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import { StatusLabel } from "../../Components/Label/"; +import TuneIcon from '@mui/icons-material/Tune'; // Import TuneIcon const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -39,10 +40,10 @@ const filterOptions = createFilterOptions({ stringify: (option) => option.title, }); -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, +const titles = [ + { title: 'Down' }, + { title: 'Cannot resolve'}, + { title: 'Clear / show all'}, ]; function createData(name, date, message) { @@ -72,7 +73,7 @@ export default function CustomizedTables() { }, }} > - + @@ -105,16 +106,30 @@ function Filter() { return ( option.title} filterOptions={filterOptions} - sx={{ width: 300 }} - disableClearable // This disables the clearable (x) button + sx={{ + width: 170, // Adjust width as needed + '& .MuiAutocomplete-inputRoot': { + height: '50px', // Adjust the height of the input field + }, + '& .MuiAutocomplete-listbox': { + maxHeight: '200px', // Adjust the max height of the dropdown list + }, + }} + disableClearable renderInput={(params) => ( + + Filter by status + + } + InputProps={{ ...params.InputProps, endAdornment: null }} /> )} />