ER: Toolkit and Project Filter Maintainability and User Experience Improvements

[Adastros]

Emergent Requirement - Problem

While reviewing the pull request linked below, I discovered the following:

1. The toolkit and projects filters were coded differently even though they perform the same function. This is due to how the toolkit and projects pages are coded. The pages and filter code should be refactored so that the filter can be a reusable component and the pages only import one version of the filter code
2. The scrollbar appears but doesn't scroll when a filter section overflows
3. Some filter tags contain overflowing text
4. The mobile-view of the filters do not scroll properly and some content is cut-off at the bottom of the filter
5. The filter arrows are not user friendly

See this comment and this comment for more details

Issue you discovered this emergent requirement in

• Toolkit dropdown menu #4764

Date discovered

• 08JUN2023

Did you have to do something temporarily

• YES
• NO

Who was involved

@kwangric
@chrismenke45
@Adastros

What happens if this is not addressed

• Maintaining and updating the project and toolkit filters will be difficult
• User experience will be hampered

Resources

• Toolkit Page
• Projects Page

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Option 1:
  • Create an issue to refactor the project and toolkit filters. Wait for the refactor to complete before creating issues to fix the UX portions of filter.
• Option 2:
  • Create one issue to refactor the project and toolkit filters and fix UX elements at the same time
• Option 3:
  • Create issues to fix filter UX. Once the issues are completed, create an issue to refactor the project and toolkit filters.

[github-actions]

Hi @Adastros, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)