Improve the layout of the filters

Created on 13 March 2025, 22 days ago

Problem/Motivation

This is a follow-up from โœจ Present boolean filters as checkboxes Active .

In that issue, we made the boolean filters into a set of checkboxes, which makes more sense than a row of selects, but is also trickier from a layout perspective. It doesn't look as nice as we'd ideally like it to.

Proposed resolution

There are three filter types: text, multi-choice, and boolean. We should group them into a grid layout by filter type.

The text filters should go in the "top" region of the grid, which spans the full width of the container. If there are multiple text filters, they just go one on top of the other.

The multiple choice filters should go in the bottom-left part of the grid, taking up, say, 30% of the full width of the grid container. If there is more than one multi-choice filter, they should go one after the other, vertically.

The boolean filters should go in the bottom-right part of the grid, mirroring the multiple-choice filters. As with the other filter types, if there is more than one boolean filter, they just go one after the other, as a list.

On small screens (phone width), the grid simply collapses and the filters are all just one on top of the other. Text filters first, then multi-choice filters, then booleans.

โœจ Feature request
Status

Active

Version

2.0

Component

User experience

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States phenaproxima Massachusetts

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024