diff --git a/.changeset/small-pants-search.md b/.changeset/small-pants-search.md
new file mode 100644
index 0000000000..1d75dc2951
--- /dev/null
+++ 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
index e73364a6d7..aad3b0f510 100644
--- 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()
       }