Update Media Query to Prevent Dropdown Wrapping in Wins Page

[gdkoo]

Fixes #6272

What changes did you make?

• Increased max-width of existing media query to 1024px to cover tablet, desktop and between desktop and xl-desktop sizes
• This changes the dropdown size to two columns when screen is in tablet, desktop, or between desktop and xl-desktop sizes

Why did you make the changes (we will use this info to test)?

• To improve user experience when viewing our website with different devices.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Breakpoints and dropdown were selected based on which dropdown resulted in wrapping at specified breakpoints

Tablet Size 768px (Teams Dropdown):

Visuals before changes are applied

Visuals after changes are applied:

Between Tablet Size and Desktop Size 999px (Role Dropdown):

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 gdkoo-improve-dropdown-wins-page-6272 gh-pages
git pull https://github.com/gdkoo/website.git improve-dropdown-wins-page-6272

---

Note that CONTRIBUTING.md cannot previewed locally; rather it should be previewed at this URL:

https://github.com/gdkoo/website/blob/improve-dropdown-wins-page-6272/CONTRIBUTING.md  

[ExperimentsInHonesty]

@gdkoo Please add to a comment, screenshots of the page at the various break points with the team drop-down opened. The current screenshots before and are of two different things (before: team drop down; after: role drop down). So it's not actually showing the before and after.

[gdkoo]

Additional Screenshots of Proposed Changes Of The Website (**Added to PR Body)

Breakpoints and dropdown were selected based on which dropdown resulted in wrapping at specified breakpoints

Tablet Size 768px (Teams Dropdown):

Visuals before changes are applied

Visuals after changes are applied:

Between Tablet Size and Desktop Size 999px (Role Dropdown):

Visuals before changes are applied:

Visuals after changes are applied:

[gdkoo]

@gdkoo Please add to a comment, screenshots of the page at the various break points with the team drop-down opened. The current screenshots before and are of two different things (before: team drop down; after: role drop down). So it's not actually showing the before and after.

@ExperimentsInHonesty Will do. For the desktop size, only the roles dropdown has wrapping, the teams dropdown has no issue. Which means that for each breakpoint, alternating dropdowns are affected. Would you like me to include both dropdowns for each breakpoint, or would my update of before and after images focusing on affected dropdowns for each breakpoint be sufficient?

[gdkoo]

@roslynwythe: wrapping was an issue up until 999px, so I chose the closest defined screen size defined by the browser (1024px is the desktop size on the browser document inspector).

Since 999px is in between ‘screen-desktop’ and ‘desktop-large’ in ‘_sass/variables/_layout.scss’, to set the breakpoint to everything up to ‘screen-desktop-large’ would mean all screen sizes would have the two column drop-down, not just tablets. This seemed like a bigger visual change to the overall layout and I wondered whether this would still fit in as a media query, if the original layout should just be modified instead. I considered if this visual change varied too much from the intended design, then it’d be best to pick a breakpoint that would still leave room for a smaller drop down when screens are at ‘screen-desktop-large’.

[Jperparas]

Availability Early Afternoons ETA 5/7 EoD

[gdkoo]

@roslynwythe: Thanks for taking a look. I'll make the changes to the screenshots.

[roslynwythe]

@ExperimentsInHonesty Please advise - by modifying the value of max-width in a media query (referring to the viewport width at which the drop down lists narrow), this PR does resolve the wrapping in the wins drop downs, with a minimal change to the design. The only problem is that the value of max-width does not match any of our predefined breakpoints, which is undesirable. The only predefined breakpoint that would eliminate wrapping is 'desktop-large', and that would change the design for desktop-size screens; the dropdown lists would each be half of the width of the screen, up to a viewport of 1632 px, like this:

If the breakpoint was set to `max-width: desktop-large'

[gdkoo]

@roslynwythe If I were to screenshot before and after for $screen-desktop-medium: 1024px, both images would be the same, as wrapping does not take place after 1000px. We chose 1024px as the breakpoint because it is the width of the standard 'Laptop' on the document inspector and is inclusive of smaller breakpoints where wrapping occurs, not because wrapping occurs at that size. What do you suggest?

[Thinking-Panda]

@roslynwythe Please add an availability and ETA for this PR.