Breakpoint class is applying to the wrong browser width

[randimays]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

I'm using some VADS classes to handle spacing between a map and some text underneath. It is working correctly when the browser font size is set to medium (standard). But when I set the browser font size to "very small" or "small," the responsive styles are incorrectly applied.

This is the expected spacing between the map and the text showing at medium font size.
This screenshot was taken at 400px screen width.

Here is the container for the text:

<div
    className="search-result-title vads-u-margin-y--3 mobile-lg:vads-u-margin-y--0"
    ref={resultRef} 
    tabIndex={0}
>
    ...
</div>

When I set the browser font size to "very small" or "small," the space is removed because now the mobile-lg:vads-u-margin-y--0 class is applying (even though that should be applying at 481px+). These screenshots were also taken at 400px screen width. Note that the space between the map and the first line of text is gone.

Screenshot from the DOM. I think the media query should be calculating on rem instead of em. But at minimum it should be providing proportionate spacing between the elements.

What I expected to happen

Spacing should be consistent for the same screen width when browser font size is increased/decreased from the normal.

To adjust font size on Chrome, go to chrome://settings in the browser, search for "font", and change the dropdown value next to Font size.

Reproducing

Steps to reproduce:

1. Add a mobile-lg prefix to an element's style class
2. View the browser at 400px screen width
3. Notice that the class is being applied and should not

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Estimating

Provide your estimate of 1, 2, 3, 5, 8 or 13
@Andrew565 - 13
@ataker -
@harshil1793 -
@it-harrison - 3
@jamigibbs - 3
@micahchiang -
@powellkerry - 3
@rmessina1010 -
@rsmithadhoc - 8

[caw310]

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

[jamigibbs]

@randimays After our Slack discussion, do we feel like this ticket should be rewritten for your last comment on the thread?

I think the consensus ended up being that em was an acceptable unit based on the information I mentioned in the thread here from this article about media queries:

the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari.

[randimays]

@jamigibbs Sure, I can adjust the wording.

[Andrew565]

Forgive me if this is more explanation than necessary. em as a unit of measurement is calculated based off the width of a letter (traditionally the letter "M") in whatever the current font being used is. As the font-size decreases, the width of a single em also decreases. Here, decreasing the font to "very small" or "small" decreases the width of an em by enough that it triggers the mobile-lg media query breakpoint.

I say all of that to say that the breakpoint class is working as intended, as it is currently defined. If we wanted to change how the breakpoints are defined, that's an option, but I think that that would require more effort and/or discovery before we could move forward with this ticket.

[caw310]

When DST picks up this ticket, we will do some discovery.