Design: Create mockups to expand the width of filter overlays

[marlenamellody]

Overview

Create mockups to explore and identify the most visually appealing and functional maximum width for filter overlays within the My Projects page.

Details

When using the filter overlays on the My Projects page, text-heavy content in the search results (e.g. long project names) affects the overlay's layout and readability.

Filter overlay with really long project name

Filter overlay with short project name

Please note that #2043 will determine the maximum width of the Admin Notes filter overlay only. All other columns have their width subject to this issue.

Action Items

• Research existing designs to determine optimal overlay width.
• Create mockups with proposed designs.
• Review with product and dev. Update if needed based on feedback
• Once finalized, add a slide to the staging deck.
• Update style guide to add new design.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• My Projects: Filtering Figma Page
• Fix problem with filtering long text in Admin Notes filter pop-up #2043