Meganav display issues with Typography changes and with Larger font sizes

[laflannery]

Status

[2024-06-27] [Laura F] DST will address the fixed height/width so that the update doesn't break the user experience for those who set their font to Large/Extra Large. (It will still need a more elegant design/solution in the future.) Slack thread. Not sure if they will transfer this ticket over or if they will create their own for their specific needs

Describe the defect

The DST has a PR with their Typography updates, which are planning to be merged Wednesday (6/26). When viewing this review instance using Large or Very Large font, the meganav is not displaying properly as it is built in such a way that is cannot flex or respond properly to the increased browser font sizes being set.

Issues to address

1. The white background in the first dropdown as a has a set width of 250px so at the larger font sizes, when the arrows end up further right, the white background cannot expand. But if this were to change to a relative width (I used 15.5rem because that aligns with the individual buttons sizes but then gives a little bit of additional padding) that should allow for the correct resizing at various font sizes

   • Micah looked at this and he said:

     Looks like it needs to be fixed in two places: here for the proxy-rewrite application and here for everywhere else

2. The "View all in {hub}" links are too far to the left because they are positioned using pixel sizes but if we change this to the same rem value that the white section is using as well as the padding the gray section is using, they should respond and flex appropriately when the text grows.

   • Again, Micah looked briefly and said:

     Looks like this one needs a fix and release in Formation here for the 768px breakpoint and potentially here for the 1008px breakpoint

3. The entire meganav has a max-height of 490px and this means that as the text grows the meganav will not expand down to contain all the now larger text. We need to address this larger size at various breakpoints

4. All text should be using relative font sizes (rems) in order to correct respond and resize to the user's font settings. The promo text (title and text) and the headings on the lists are using hardcoded pixels so do not get larger when the rest of the text does. This text needs to be updated to use rems.

Screenshots

To Reproduce

Steps to reproduce the behavior:

1. Increase your font size in your browser. TO do this will depending on your browser but for Chrome this is under > Settings > Appearance
2. Go to the VA homepage
3. Expand the Meganav
4. Notice that all of the content does not fit within the background space

AC / Expected behavior

• [ ] All text within the header/meganav using rems instead of pixels
• [ ] At all breakpoints, the header/meganav displays and functions properly
• [ ] At all browser font size settings, the header/meganav displays and functions properly
• [ ] Design review
• [ ] Accessibility review

[laflannery]

DST will address the fixed height/width so that the update doesn't break the user experience for those who set their font to Large/Extra Large. (It will still need a more elegant design/solution in the future.) Slack thread. Not sure if they will transfer this ticket over or if they will create their own for their specific needs

[laflannery]

@mmiddaugh I believe you had handed off this issue to DST and gave them the link to this ticket. I don't believe there is anything for us to do on this now. If that's the case, am I able to close this?

CC: @FranECross

[FranECross]

Pinged Michelle in Slack, too, since she's bombarded with emails and might not see the question above. https://dsva.slack.com/archives/C06EK4NLGDQ/p1723219621898399

[mmiddaugh]

That's my understanding, @laflannery - I think we can close this.