Default portal containers created by primer are absolutely positioned at 0,0

[jfuchs]

This PR adds three styling rules to the primer-created portal container root: position: absolute, top: 0, left: 0. This doesn't add any styling to either roots provided via registerPortalRoot or roots provided by placing an element with id __primerPortalRoot__ in the DOM.

Why?

Compared to statically positioning a portal root after body content, absolutely positioning a portal root relative to the body will lead to more stable overlay positioning across DOM changes.

See also #1395

Screenshots

N/A

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ec1cba

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

This PR includes changesets to release 1 package

Name	Type
@primer/components	Minor

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	48.45 KB (+0.04% 🔺)
dist/browser.umd.js	48.72 KB (+0.03% 🔺)

[dgreif]

I'm a little nervous about this change, given the odd behavior we have been seeing in Safari without it. I'd give this some good testing, both in stories here and in Projects Beta, in all the three major browsers. If all looks good, I'm ok with this solution