Responsive scrollable filter bar

[JiaXinEu]

Summary:

Fixes #377

Type of change:

• ✨ Enhancement

Changes Made:

• Add BreakpointObserver to observe and respond to screen size changes
• Add private method to update styling of filter-bar
• Put dropdown-filters in scrollable container

Screenshots:

Proposed Commit Message:

Modify responsiveness of filters to screen size change

The filter bar is cut off when screen width is reduced. We should 
make the design responsive.

Let's make filter bar scrollable when it cannot fit on screen.

Checklist:

- [X] I have tested my changes thoroughly. - [ ] I have created tests for any new code files created in this PR or provided a link to a issue/PR that addresses this. - [X] I have added or modified code comments to improve code readability where necessary. - [ ] I have updated the project's documentation as necessary.

[JiaXinEu]

I see the vision and am open to the possibility of using a scrollable filters container like you have implemented. However, I feel that the scrollbar is not very intuitive to the user, i.e., not what you would find on most other sites. It will also be quite hard to use on a small screen like a mobile screen compared to a hamburger or dropdown menu, which is the very audience this change is supposed to cater to. I would prefer a different approach but you are free to continue working on this approach and try to apply some cosideration for mobile users who don't have that much space to scroll horizontally for example left and right scroll buttons at the ends of the scrollbar.

Thank you for a better insight of the issue. The current PR uses a togglable menu approach

[JiaXinEu]

Additionally, would it be better to put the app-label-filters into the hamburger dropdown as well since on small screens at first glance it now seems to suggest it denotes something about all filters.

Thank you for the feedback. I have moved label-filter into the hamburger dropdown as well, and done the minor fixes on css as suggested.