Fixing modal document padding on mobile (#2151)

primer · Jul 24, 2023 · 78e0d17 · 78e0d17
1 parent 0604e5f
commit 78e0d17
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/small-pants-search.md b/.changeset/small-pants-search.md
@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+Checking document scrollbar width before making dialog backdrop visible to fix issue with document padding on mobile screens.
+
+<!-- Changed components: Primer::Alpha::Dialog -->
diff --git a/app/components/primer/alpha/modal_dialog.ts b/app/components/primer/alpha/modal_dialog.ts
@@ -101,9 +101,9 @@ export class ModalDialogElement extends HTMLElement {
       if (this.open) return
       this.setAttribute('open', '')
       this.setAttribute('aria-disabled', 'false')
-      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
       document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
       document.body.style.overflow = 'hidden'
+      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
       }