Filter sidebar contents shift downwards when going between 1 and 0 selected filters

[sarayourfriend]

Description

Filter sidebar contents shift downwards when going between 1 and 0 selected filters

Reproduction

1. Go to `search-staging.openverse.engineering/search?q=birds` and open the filter sidebar
2. Toggle a single filter back and forth and note that the sidebar contents shift downwards/upwards when going to and from a single selected filter.

Screenshots

openverse-filter-sidebar-shifting.mp4

Additional context

Probably a height issue with the "clear filters" button.

Resolution

• 🙋 I would be interested in resolving this bug.

[anksh1997]

Hi @sarayourfriend, I would like to help out with this issue : )
Please let me know if I can take it.

As I debugged a little I found that font sizes of FILTER BY and Clear Filters are different Clear Filters is having relatively larger font size causing a size overflow and that, in order, pushing below DOM elements little downwards by 1 px and as this Clear Filters not available on inital load that explains why its happening on check of the checkboxes.

[sarayourfriend]

@asprazz Please take it away! Your diagnosis sounds good to me. I've assigned the issue to you 🚀 Feel free to ping if you need any assistance 💃

[anksh1997]

Hi @sarayourfriend, as I have started to think about the solution, I have came up with two solutions.

One is to increase the font-size of FILTER BY same as of Clear Filter which I think should be the right thing to do.

Second is to add margin (my-1) around parent of Clear Filter or FILTER BY so it will resolve the issue of overflowing without need to change the font size.
I just want your thoughts over it.

[zackkrida]

Those both sound like good approaches that could work, @asprazz. Another would be to absolutely position the 'clear' button to the top right (top 'end', in a right-to-left RTL context) corner of the sidebar, which would take it out of the document flow and make sure the page doesn't move when the clear button's visibility is toggled.

[sarayourfriend]

All sound good to me. If you do Zack's suggestion just make sure to keep RTL layout in mind. You can test those by adding /ar/ to these start of the path, i.e., http://localhost:8443/ar/search?q=birds

[obulat]

@asprazz, thank you for taking on this issue! It is important to keep the font sizes matching the design mockups: https://www.figma.com/file/w60dl1XPUvSaRncv1Utmnb/Audio-Release?node-id=133%3A15087
(If you can't view the figma file, the styles for 'Clear all' button and for the 'FILTER BY' heading are font-family: Inter; font-size: 12px; font-weight: 600;)
Another solution could be increasing the line-height of the FILTER BY heading so that it's always the same height as the button. That might break for languages that have longer words, though :(

[sarayourfriend]

The absolute positioning may also be a problem for languages with longer words, actually, now that you mention it Olga. This issue is deceptively tough 🙂

Overall I think the margin option probably has the least pitfalls of the approaches listed.

[anksh1997]

Hi All, I gave everything a new thought by going through all options we came up with.

1. FILTER BY font size increment was against the rule
2. position absolute or setting up line height can create problems for longer words and it was just a way of making things complicated
   and
3. setting margin of parent element in order to accomodate the larger child this was also an option

but I chose to reduce padding of Clear Filters in thought of adjusting that element only without disturbing the sibling or the parent

Please do correct me if my thoughts are diverging and PR is always reversible : )