ER: improve the drop downs on wins to avoid unnessary wrapping

[roslynwythe]

Emergent Requirement - Problem

For certain screen sizes (for example "iPod Mini"), the drop downs on the wins page sometimes are very small, and it forces the content in them to wrap, but there is plenty of room on the page at the time.

Issue you discovered this emergent requirement in

• #4706

Date discovered

Did you have to do something temporarily

• [ ] YES
• [x] NO

Who was involved

@ExperimentsInHonesty

What happens if this is not addressed

Project names will wrap to a second line, creating a messy appearance and reducing the number of projects that can be viewed without scrolling.

Resources

screenshot

Recommended Action Items

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

Potential solutions [draft]

The drop downs are implemented using flexbox layout. Suggestion to utilitize the CSS flex-wrap property to prevent wrapping of text.

[github-actions[bot]]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Feature

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[github-actions[bot]]

Hi @Thinking-Panda, 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 :)

[Thinking-Panda]

Availability: Weekdays ETA: 2/8/24

[ExperimentsInHonesty]

@Thinking-Panda unless you were thinking about making this issue for yourself. Once you are finished making it please add the following note to a comment which I will see when I prioritize it

Bonnie says: If @mademarc has not done a medium size issue yet, please assign him to this issue when its ready

[Thinking-Panda]

Availability: Weekdays ETA:2/10/24

[Thinking-Panda]

@roslynwythe the project names are wrapped in the mobile and tablet screen sizes. Should this issue focus on fixing both screen size displays?

[roslynwythe]

@Thinking-Panda @ExperimentsInHonesty I don't think there is room to enlarge the drop downs for mobile screen sizes without a design change, so this issue should focus on the tablet screen size. But that doesn't mean we need a new media query with a table size breakpoint. There is a media query set so that at screen sizes below 659px, the Role and Team drop downs each take up half of the available space. IMy suggestion would be to be adjust that breakpoint upwards, probably to the desktop size.

[Thinking-Panda]

@roslynwythe - I agree with you that to fix the wrapping in mobile view, we need a design change. Probably, having the dropdowns one below the other.

[roslynwythe]

@ExperimentsInHonesty please advise, we could proceed with writing the issue to better utilitize the available space in tablet view, without a design change, or we could enlarge the scope the issue and change the mobile design, having the dropdowns one below the other and thereby making each drop down wide enough to avoid wrapping.

[ExperimentsInHonesty]

@roslynwythe Let's just fix the problem with them not wrapping when there is room for now. Another team's designer is working on a new wins card layout which will eventually allow us to use the filter from the projects page.

[roslynwythe]

Hi @Thinking-Panda in this ER please create a comment providing a link to the issue that you created. Also in the issue you created, in the Resources section, please write "This issue resulted from #6225" so that we can easily navigate between the ER and the issue. Thank you for writing the issue!

[Thinking-Panda]

• Issue created from this ER https://github.com/hackforla/website/issues/6272

[ExperimentsInHonesty]

@Thinking-Panda thank you for making the issue. Good job!