Skip to content

feat: Align Issue filters UI with Machine filters design #882

@timothyfroehlich

Description

@timothyfroehlich

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions