Support fractional viewport sizes for max-width media queries

[simurai]

What are you trying to accomplish?

This came up in #1737 (comment) and adds support for "fractional viewport sizes" where we use max-width media queries. Like for the hide utilities.

What approach did you choose and why?

Using - 0.02px instead of - 1px should add better support for hi-dpi screens or zooming. From https://www.w3.org/TR/mediaqueries-4/#mq-min-max

the possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities (e.g. on high-dpi displays or as a result of zooming/scaling)

In case you're wondering why - 0.02px and not - 0.01px:

// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261

What should reviewers focus on?

Should this rather be a variable? How should we call it?

Are additional changes needed?

• No, this PR should be ok to ship as is. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: df025fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR