The simplest thing to try here would be horizontal scrolling with a slightly different button appearance / layout:

• Add filter and Reset buttons fixed in position on the right
• Add filter and Reset become icon buttons
• Filter chips scroll horizontally

Some other things we might try to save space:

• Remove the inline x buttons
• Reduce chip size and internal padding

There are usability trade-offs to this though, so perhaps worth looking at separately.

Another option would be to restrict display to X number of chips, and hide the others behind a + x more link:

The horizontal scrolling is a common practice on mobile devices and scales well. If paired with the scrollbar mixin, it could work well and potentially be simple to implement, at least as a starting point.

Something else we tried early on is if on mobile or list view, condense filters down into dropdown. We'd have an indicator "1" on filter icon. Relates a little to previous discussions about hiding view filters by default.

Horizontal scrolling is also nice though and an improvement over what we have.

Containing all the filters in a single menu turned out to be a dead-end in terms of accessibility, but a similar approach might be to place filters in a dedicated panel, accessed by a toggle button.

We can be smart about when to show/hide the panel:

• Hidden by default across all layouts when no filters are applied
• Visible on load when the container is larger than X (Table / Grid layout), and filters are applied
• Hidden when the container is smaller than X (List layout), even if filters are applied