diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css
index 855394d2774..fb773a6b1b4 100644
--- a/packages/react/src/Dialog/Dialog.module.css
+++ b/packages/react/src/Dialog/Dialog.module.css
@@ -1,11 +1,11 @@
-/* The --dialog-scrollgutter property is used only on the body element to
+/* The --prc-dialog-scrollgutter property is used only on the body element to
  * simulate scrollbar-gutter:stable. This property is not and should not
  * be used elsewhere in the DOM. There is a performance penalty to
  * setting inherited properties which can cause a large style recalc to
  * occur, so it benefits us to prevent inheritance for this property.
  * See https://web.dev/blog/at-property-performance
  */
-@property --dialog-scrollgutter {
+@property --prc-dialog-scrollgutter {
   initial-value: 0;
   inherits: false;
   syntax: '<length>';
@@ -231,7 +231,7 @@
 
 body:has(.Dialog.DisableScroll) {
   /* stylelint-disable-next-line primer/spacing */
-  padding-right: var(--dialog-scrollgutter) !important;
+  padding-right: var(--prc-dialog-scrollgutter) !important;
   overflow: hidden !important;
 }
 
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 3241f18d7a1..14f6151ede9 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -288,7 +288,12 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
   )
 
   React.useEffect(() => {
-    document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`)
+    const scrollbarWidth = window.innerWidth - document.body.clientWidth
+    // If the dialog is rendered, we add a class to the dialog element to disable
+    dialogRef.current?.classList.add(classes.DisableScroll)
+    // and set a CSS variable to the scrollbar width so that the dialog can
+    // account for the scrollbar width when calculating its width.
+    document.body.style.setProperty('--prc-dialog-scrollgutter', `${scrollbarWidth}px`)
   }, [])
 
   const header = (renderHeader ?? DefaultHeader)(defaultedProps)
@@ -327,7 +332,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             data-width={width}
             data-height={height}
             sx={sx}
-            className={clsx(className, classes.Dialog, classes.DisableScroll)}
+            className={clsx(className, classes.Dialog)}
           >
             {header}
             <ScrollableRegion aria-labelledby={dialogLabelId} className={classes.DialogOverflowWrapper}>