Responsive hide classes issue when the screen width is exactly 768px

[ovflowd]

Describe the bug

Primer has visibility classes hide-md and hide-lg that goes respectively from the screen sizes 544px to 768px; 768px to 1012px. This seems perfectly reasonable.

The issue that, is not actually part of Primer itself, would happen to suppose the following scenario:

1. You use both hide-md in one div that should not display on medium screens but it should appear on large screens and another div using hide-lg that should not appear for large screens but should for medium ones.
2. None of them will appear since the screen has exactly 768px of width.

To Reproduce

Steps to reproduce the behavior:

1. Implement a snippet for example

   <div class="hide-md hide-sm hide-xl">show on large ONLY</div><div class="hide-lg hide-sm hide-xl">show on medium ONLY</div>

2. If your screen size is exactly 768px. This will happen. You may be able to test/reproduce by using Developer Tools and set manually your screen size to 768px. If you have an Apple iPad Mini and rotate the screen to portrait this will also happen. Since iPad Mini portrait resolution is exactly 768px.

Expected behavior

The clash of screen sizes should not happen. This is easily solvable by either moving md one pixel less or one-pixel plus.

This may have unattended side effects... Since it could be someone is relying on this condition of 768px.

Screenshots

There should be a sidebar on the blue empty background.

It should be behaving like this.

You may either check on https://santoro.dev

Desktop (please complete the following information):

• OS: macOS 10.15.4
• Browser: Safari
• Version: 13.2

Additional context

As explained before, this wouldn't probably be considered as a bug part of Primer. Since this is indeed a very edge scenario and may never happen. But maybe it is worth giving a look.

[simurai]

@ovflowd Thanks for reporting. 🙇 What version of Primer CSS are you using? Based on this file path in DevTools it looks like it's 11.0.0?

This issue was fixed by #746. So updating Primer CSS to 12.2.2 or higher should fix the problem.

[ovflowd]

Thanks, @simurai! Going to update my Primer version by just changing that line.

Forgot totally that Primer was being loaded on-demand and not actually being built from sources during the Jekyll build process.

Thank you!

[ovflowd]

I also want to apologize 🤦🙇 that I forgot to search for similar issues before creating this one...

Thanks again!

[simurai]

I also want to apologize 🤦🙇 that I forgot to search for similar issues before creating this one...

No worries.. I still remember running into this bug myself. 😄