Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers

[jameskoster]

Instead of permanently displaying filter controls and selections, we can place them in a toggle-able panel. This will allow users to selectively tidy up the interface which will prove particularly useful on narrow viewports (mobile) and containers (list layout).

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 on load when the container is smaller than X (List layout), even if filters are applied

Original issue

In https://github.com//issues/59696 the display of individual chips can be finessed.

But we still need to figure out the display of many filters in narrow containers / viewports. It's not a huge problem right now because the existing data views only have <=2 filters.

However, things like Posts or Media (#55238) can have many filter options, and this experience isn't ideal:

Let's explore how to better display many chips in the filter UI.

[jameskoster]

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

horizontal.mp4

• 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.

[jameskoster]

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

[jasmussen]

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.

[SaxonF]

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.

[SaxonF]

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

[jameskoster]

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