Pin projects filter to top of projects list mobile view

[Maarimar]

Fixes #7525

What changes did you make?

• Pinned Filter and Search Bars: The filter and search input fields are now pinned to the top of the screen when scrolling, ensuring they're always accessible for quick adjustments.
• Filter Counter and Clear All: A new counter has been added to indicate the number of active filters, alongside a convenient "Clear All" option to quickly remove all applied filters.
• Contextual Filter Pills: Filter "pills" are now displayed only within the opened filter feature, reducing clutter and providing a cleaner interface when filters aren't actively being managed.

Why did you make the changes?

• To reduce clutter and provide a cleaner interface when filters aren't actively being managed.
• Improve the usability of filter and have the opportunity to modify search when scrolling projects list.

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Check the PR's comments. If present on your PR, the CodeQL alert looks similar as shown

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• [x] I have checked this PR for CodeQL alerts and none were found.
• [ ] I found CodeQL alert(s), and (select one):
  • [ ] I have resolved the CodeQL alert(s) as noted
  • [ ] I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • [ ] I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Instructions for resolving CodeQL alerts

If CodeQL alert/annotations appear, refer to How to Resolve CodeQL alerts.

In general, CodeQL alerts should be resolved prior to PR reviews and merging

Screenshots of Proposed Changes To The Website:

Visuals before changes are applied

Visuals after changes are applied

[github-actions[bot]]

Want to review this pull request? Take a look at this documentation for a step by step guide!

---

From your project repository, check out a new branch and test the changes.

git checkout -b Maarimar-Pin-Projects-Filter-to-Top-of-Projects-List-MobileView-#7525 gh-pages
git pull https://github.com/Maarimar/website-HfLA.git Pin-Projects-Filter-to-Top-of-Projects-List-MobileView-#7525

[t-will-gillis]

Hi @Maarimar Please do not assign reviewers to your issue, unless either you have spoken with them already or they previously reviewed the same PR and need to re-review it.

In this case, one of the reviewers that you assigned is no longer active in the org. When other, available reviewers see that you have reviewers assigned already, they will likely skip over your PR and you may not have anyone reviewing your PR.

I will un-assign the reviewers.

[dvernon5]

ETA: EOD Availability: Sun - Thurs: 6 PM - 8 PM | Fri: 4 PM - 6 PM

[Maarimar]

Thank you @dvernon5 for your feedback. I'll work on this this weekend and hopefully we can merge it soon.

[daras-cu]

@Maarimar can you please give us a status update on this PR? Are you able to make the changes requested or do you need additional help? Thanks!

[Maarimar]

@daras-cu I have been working on this but haven't been able to fix it. The challenge is that the search bar is nested inside the filter container in the HTML structure, which was necessary for the mobile functionality. We need a solution that visually positions the search bar outside its container on desktop without breaking the mobile behavior. If you have any input I'd appreciate it.

[daras-cu]

@Maarimar got it, I'll look into it and see if there's an alternate way to place the search bar. @dvernon5 can you also take a look since you are already familiar with this issue?

[daras-cu]

Hi @Maarimar, I did some research and I think the simplest way to handle the search bar placement issue is to have two search bar elements and use CSS to toggle the display attribute depending on the screen size. You'll have to make some adjustments as the search bar currently uses an id in a couple places, so you'll likely have to use a class instead or create two unique ids to differentiate. It looks like the projects page is currently the only page using a search bar, so the changes you make will not break any other pages, but double check to be sure.

Let me know if that makes sense and if you have any questions. @dvernon5 if you have any input or can think of a better solution let us know as well.

[DDVVPP]

Hi @Maarimar ! Just checking in about the status of this PR. Is everything clear, or do you need anything clarified? Thank you!

[Maarimar]

Hi! @daras-cu Thank you so much for your feedback and ideas. I' think that should solve our problem, it makes a lot of sense to me. Also sorry about my late reply, I've been out for the past few weeks but I an aiming to have this ready for review by the end of the week. @DDVVPP

[daras-cu]

@Maarimar no worries, glad you are back! I know you've done a lot of work and troubleshooting already on this, thanks for continuing to work on it.

[DDVVPP]

Thanks @Maarimar! Let us know if you need any additional help

[Maarimar]

Apologies for the messy commit history — my local branch got out of sync with the upstream, which caused some duplicate commits to appear here. The relevant changes for this PR are in commit fe7ae6e. Please focus on that one. Sorry again! @dvernon5

[Maarimar]

Happy to contribute!! @daras-cu @dvernon5