Goal
Align the IssueFilters component with the newly implemented MachineFilters design to ensure a consistent user experience across the application.
Current design (Issue filters)
- Single row with many filters.
- Can feel cramped on smaller screens or with many active filters.
New design (Machine filters)
- Search bar with inline badges: Higher contrast, cleaner input.
- Two-line layout:
- First line: Search bar and Sort dropdown.
- Second line: Functional filters (Status, Owner, etc.) in a row of multi-selects.
- Improved "Clear All" positioning: Next to the sort dropdown for better visibility.
Implementation details
- Update
src/components/issues/IssueFilters.tsx to follow the layout pattern established in src/components/machines/MachineFilters.tsx.
- Ensure all current issue filters (Machine, Severity, Priority, Assignee, Reporter, Frequency, Watching, Date Range) are correctly moved to the second line or handled in a responsive layout.
Goal
Align the
IssueFilterscomponent with the newly implementedMachineFiltersdesign to ensure a consistent user experience across the application.Current design (Issue filters)
New design (Machine filters)
Implementation details
src/components/issues/IssueFilters.tsxto follow the layout pattern established insrc/components/machines/MachineFilters.tsx.