get sidebar to use all available vertical space

[spaceyuck]

I've been messing with some CSS to get the new sidebar to use all the vertical space it has available, since I found the default behavior to use max 300px per filter list imperfect.

Due to the scroll-able filter item list <ul> inside each box, this gets messy. The approach is, that everything from the fixed position sidebar down to the filter item list <ul> needs to be vertical flexbox, to leverage shrink / grow to dynamically size each filter box.

I'm mostly looking for some feedback and some tips (hence the draft).

It works OK, but has a few issues

• collapse / expand animations seem to target original height - how do they even work?
• the space use is still not efficient, because all open boxes get equal spacing, regardless of content height (see screenshots)
• unsure about the :has() pseudo-class, it' pretty newish (2023, caniuse says 93%)
• haven't even looked at mobile yet

Screenshots

[WithoutPants]

This simplest way forward would be to remove (or override to unset) the max-height in .sidebar-list-filter ul and .sidebar-saved-filter-list-container .saved-filter-list. This would eliminate the internal scrollbars which admittedly are pretty gross.

If we were to take this approach, I'd want to do some sticky positioning of the section headers and ideally the search input for the section as well. This allows the user to easily filter on whatever criterion they are scrolling through, or close the section to peruse other sections.

[WithoutPants]

Here's a quick and dirty prototype: https://github.com/WithoutPants/stash/tree/prototyping/sidebar-no-extra-scrollbars

The headers are stickied, but the search filter inputs are not. The behaviour when closing a scrolled section is a bit weird as well, but probably not enough to be a problem.

[spaceyuck]

I played around a bit with that approach. I like scrolling the whole sidebar more than scrolling small individual lists, so definitely an improvement in my book.

Stacking multiple sticky elements is only possible with fixed offsets, unless you want to dive into JS solutions with dynamically calculating offsets and IntersectionObserver fun and the likes (possible, but painful). So essentially, stuff can only be sticky that's within the same element.

I pulled the included / excluded item list into the collapse header, and now they sticky like the header itself, which seems very helpful when hunting for more items to filter with.

The search box seems more problematic, since it's a couple of elements and components down the stack. I don't think it's possible to sticky the search box without restructuring things more (especially since the selected item lists make the already stick content dynamic in height), or going the JS route for dynamically calculating offsets always seems. But honestly, that level of effort seems overkill for the search box.