[feature] Optimize dropdowns for mobile

[analordello]

New proposal:

Figma file with all the details: https://www.figma.com/design/Tj53r39w08gRmnAu11LZ5I/Library?node-id=0-1&p=f&t=4CNirtClnXo4ft5r-11

The following interaction will be applied to breakpoint 640px and below

Filter and sorting

1. The filter and sorting buttons for the Research page will be condensed into one single button. For the Library, this button applies only to the sorting options for now.

2. When cliked, it opens a modal with the filter and sorting options.

3. To apply the filters / sorting, users must click on the button “apply”. There is also a Reset button to reset the filters and sortings to their original state.

Library / Research

4. The modal closes when clicking outside, on the “x” button, or on the “apply” button
5. Once filters and sorting options are applied, it will display a badge on the button with the number of filters/sorting modified

###Search

6. The search bar is collapsed into one button that, when clicked, will open the search input

7. When search is applied a new text will show under the search button with the saying “[# of results] results for “[inputed text]”” as in the image below

[analordello]

Hey @mariojsnunes or @benfurber , can either of you check this issue description to check if there's any information missing more clarification?

[mariojsnunes]

All good to pick up!