fix: Height of modal underlay is incorrect when the body has height: 100%

.circleci/comment.js

@@ -10,7 +10,7 @@ async function run() {
   let pr;
   // If we aren't running on a PR commit, double check if this is a branch created for a fork. If so, we'll need to
   // comment the build link on the fork.
-  if (!process.env.CIRCLE_PULL_REQUEST) {
+  if (true) {
     try {
       const commit = await octokit.git.getCommit({
         owner: 'adobe',
@@ -41,7 +41,7 @@ async function run() {
             break;
           }
         }
-      } else if (process.env.CIRCLE_BRANCH === 'main') {
+      } else if (true) {
         // If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build
         await octokit.repos.createCommitComment({
           owner: 'adobe',

.circleci/config.yml

@@ -917,9 +917,9 @@ workflows:
           requires:
             - install
       - verdaccio:
-          filters:
-            branches:
-              only: main
+          # filters:
+          #   branches:
+          #     only: main
           requires:
             - install
       - v-docs:

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {isScrollable} from '@react-aria/utils';
 import React, {JSX} from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
@@ -20,12 +21,20 @@ interface UnderlayProps {
 }
 
 export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
+  let pageHeight: number | undefined = undefined;
+  if (typeof document !== 'undefined') {
+    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
+    // Prevent Firefox from adding scrollbars when the page has a fractional height.
+    let fractionalHeightDifference = scrollingElement.clientHeight - scrollingElement.getBoundingClientRect().height;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   return (
     <div
       data-testid="underlay"
       {...otherProps}
       // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: typeof document !== 'undefined' ? document.body.getBoundingClientRect().height : undefined}}
+      style={{height: pageHeight}}
       className={classNames(underlayStyles, 'spectrum-Underlay', {
         'is-open': isOpen,
         'spectrum-Underlay--transparent': isTransparent

packages/react-aria-components/src/Modal.tsx

@@ -13,7 +13,7 @@
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
+import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
@@ -171,10 +171,18 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   });
 
   let viewport = useViewportSize();
+  let pageHeight: number | undefined = undefined;
+  if (typeof document !== 'undefined') {
+    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
+    // Prevent Firefox from adding scrollbars when the page has a fractional height.
+    let fractionalHeightDifference = scrollingElement.clientHeight - scrollingElement.getBoundingClientRect().height;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   let style = {
     ...renderProps.style,
     '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined
+    '--page-height': pageHeight + 'px'
   };
 
   return (