Fix: Improve filter layout for mobile

[GODrums]

Motivation

On smaller screens (e.g. mobile) the leaderboard filters are sometimes outside of the viewing area.

Description

This PR gives the filter component more responsiveness for smaller screens.

Screenshots (if applicable)

Width <580px:

Width 580-1280px:

Checklist

General

• PR title is clear and descriptive
• PR description explains the purpose and changes
• Code follows project coding standards
• Self-review of the code has been done
• Changes have been tested locally
• Screenshots have been attached (if applicable)
• Documentation has been updated (if applicable)

Client (if applicable)

• UI changes look good on all screen sizes and browsers
• No console errors or warnings
• User experience and accessibility have been tested
• Added Storybook stories for new components
• Components follow design system guidelines (if applicable)

[FelixTJDietrich]

Can you also make the container fit the subviews? There is a lot of whitespace to the side 🤔

[GODrums]

Can you also make the container fit the subviews? There is a lot of whitespace to the side 🤔

What testing setup did you use to get this whitespace? I can't seem to reproduce it at all.

[FelixTJDietrich]

Ah okay, I was just checking Storybook 🤔 Then it's fine, but ideally it should behave similarly

[FelixTJDietrich]

But it also looks kind of like this in your PR screenshot

[GODrums]

Ah okay, I was just checking Storybook 🤔 Then it's fine, but ideally it should behave similarly

So the reason why it's not limited in Storybook is because we use the Tailwind container to limit the max-width of our whole "page body".

But it also looks kind of like this in your PR screenshot

The image is exactly the "wrapping" break-point from flex-wrap. So if you add a few pixels of width, it will snap back into the same row. Looks like this then: