Breakpoints defined in rem are incompatible with breakpoints defined in px

Follow up from: gitlab!71175 (merged)

Description

When using breakpoints defined in rem, breakpoints in gitlab-ui can be incompatible with breakpoints defined in px in the GitLab project or in JS.

When both are used on the same screen (such as when migrating gradually from one to the other), it can lead to unexpected results.

Example 1:

Migrating badges to gitlab-ui may result in inconsistent viewports when using base fonts other than 16px:

@dmishunov noted that "... we have an issue when refactoring CSS while moving away from the Bootstrap responsive styles to gitlab-ui. To illustrate the issue, I have recorded an example with explanations. Might be worth checking for those dealing with the migrations from Boostrap to gitlab-ui."

See: https://www.youtube.com/watch?v=5nOQYy9CjVk

Example 2:

While we use rem in our variables.scss to generate our responsive utils classes, we use in GlBreakpointInstance with pixels for the javascript-based responsive:

• https://gitlab.com/gitlab-org/gitlab-ui/blob/main/src/scss/variables.scss#L23
• https://gitlab.com/gitlab-org/gitlab-ui/blob/main/src/utils/breakpoints.js#L1

Possible solutions

We could consider refactoring the GitLab UI breakpoints to use px instead of rem? This is what TailwindCSS does in its default config.

We may also switch to using the Boostrap breakpoints, which leverage pixel fractions when defining breakpoints for min- and max- values.

Original discussion

For reference, as Slack discussion between @dmishunov, @peterhegman, @mrincon, @ekigbo, @psimyn https://gitlab.slack.com/archives/C0GQHHPGW/p1633013454279400 (internal)