Default portal containers created by primer are absolutely positioned…

… at 0,0 (#1398) * Default portal containers created by primer are absolutely positioned at 0,0 * changeset and snapshot Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com>
primer · Sep 1, 2021 · e4dac57 · e4dac57
1 parent 83b888f
commit e4dac57
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/dull-toys-crash.md b/.changeset/dull-toys-crash.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': minor
+---
+
+Default portal containers created by primer are absolutely positioned at 0,0
diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx
@@ -26,6 +26,9 @@ function ensureDefaultPortal() {
     if (!(defaultPortalContainer instanceof Element)) {
       defaultPortalContainer = document.createElement('div')
       defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID)
+      defaultPortalContainer.style.position = 'absolute'
+      defaultPortalContainer.style.top = '0'
+      defaultPortalContainer.style.left = '0'
       const suitablePortalRoot = document.querySelector('[data-portal-root]')
       if (suitablePortalRoot) {
         suitablePortalRoot.appendChild(defaultPortalContainer)

diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
@@ -206,6 +206,7 @@ Object {
         </button>
         <div
           id="__primerPortalRoot__"
+          style="position: absolute; top: 0px; left: 0px;"
         >
           <div
             style="position: relative; z-index: 1;"
@@ -250,6 +251,7 @@ Object {
       </button>
       <div
         id="__primerPortalRoot__"
+        style="position: absolute; top: 0px; left: 0px;"
       >
         <div
           style="position: relative; z-index: 1;"