Bug - Header width doesn't scale with large font browser settings

[micahchiang]

Description

In doing recent font normalization work, we recently discovered the header for VA.gov doesn't scale properly when browser font settings are set to large or extra large. To fix this, the width values for the header menus need to be in relative units instead of pixels.

Considerations

• slack thread with more context and proposed fix
• Per Laura Flannery's comments, there are 2 issues at play that need to be addressed:
  1. The first dropdown 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 - I looked at Medium, Large and Very Large
  2. For the "View all in {hub}" hub links, this is again 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, this should respond and flex appropriately when the text grows

Tasks

• [ ] For point 1 above: update the value for proxy-rewrite and everywhere else to 15.5 rem
• [ ] For point 2 above: Update formation here and here to 15.5rem. In css-library update the value here and here to 15.5rem
• [ ] Test with verdaccio that container scaling has been resolved using verdaccio

Acceptance Criteria

• [ ] Above tasks have been completed

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc