Make Crowdsource Contributions page responsive for all screens

[Mahimahto]

PR Description

Summary

This pull request improves the responsiveness of the Crowdsource Contributions page, ensuring a smoother experience on smaller screens such as mobile devices and tablets.

Changes Made

1.Search Bar

• Made search bar responsive.
• Now takes full width on small screens and a fixed width on medium+ screens.

2. "Showing all contributions" header

• Adjusted heading styles to be responsive (text-base sm:text-lg md:text-xl).
• Ensures proper alignment in both mobile and desktop layouts.

3. Sidebar (Filters section)

• Sidebar filters (left-side) are now hidden on small screens (hidden lg:flex).
• Remain visible only on larger screens for better layout.

4. Clear Filters button

• Updated visibility: shown only on medium+ screens (hidden md:inline-flex).

5. Mobile/Tablet Filter Drawer

• Added a floating button (#mobile-filter-button) for mobile and tablet users.
• On click, a sliding drawer opens from the right side with all filters.
• Drawer includes an overlay and smooth transition animations.

Before

• Filters sidebar always visible, making layout cramped.
• Search bar and headers were not scaling properly.

After

• Sidebar hidden on small screens, replaced by floating filter button + drawer.
• Search bar and contribution header align properly on all screen sizes.

Help Needed

Currently, the mobile filter drawer automatically applies filters as soon as the user selects them.
I would like to change this behavior so that filters are only applied after the user clicks an "Apply" button inside the drawer.

If anyone can guide me on how to prevent auto-apply on selection and instead apply filters only on explicit button click, that would be very helpful.

Screenshots

[maanasb01]

Hey @Mahimahto, the issue that you are facing, that is, on clicking the options, the filter is getting applied directly and not waiting for the apply button, is because you have used the same components from the existing filter menu, and in the existing filter menu, the event handling is such that on selecting an option, it directly redirects to a new URL to apply the filter. That is what is happening in the mobile version as well. Also, the apply button that is created for the mobile filter has no event handler to apply the filter, so that button won't work in any scenario.

We can either go with the existing setting, that is, clicking on an option applies the filter directly (and we remove the apply filters button), or we would need to write new event handlers separately for the mobile version of the filter that apply all the selected filters after clicking on the apply button, and modify the existing HTML as well.

CC: @dennyabrain @aatmanvaidya

[Mahimahto]

Changes I made:

I removed the “Apply Filter” button.

• I added freeze (sticky) for first column and header row on phone screens.
• Used max-sm:sticky, max-sm:top-0, max-sm:left-0, and max-sm:z-20.
• I tried to add freeze on tablet screens using md, but it is not working.
• I used overflow-x-auto and overflow-y-auto with max height 500px for scroll.

Tablet freeze is not working even after using md. What should I do for tablet screens?

[dennyabrain]

have merged with the known limitation.
having a sidebar with different functionality for desktop vs mobile, might need some thought. Deferring for later.