fix: Bugs from testing (#8911)

* Fix underlay height during animation

* Fix tray animation speed

* Fix position of arrows in react-aria homepage

* Fix scrollbars appearing in Firefox when a dialog opens

* Fix SegmentedControl off by 1px in Safari

* Fix alignment of Disclosure example in RAC docs

Author: devongovett

packages/@adobe/spectrum-css-temp/components/tray/index.css

@@ -70,7 +70,7 @@
   border-radius: var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-border-radius) var(--spectrum-tray-border-radius);
 
   /* Start offset by the animation distance */
-  transform: translateY(100%);
+  transform: translateY(calc(100% - 100vh));
 
   /* Exit animations */
   transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay),

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

@@ -25,7 +25,7 @@ export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps):
       data-testid="underlay"
       {...otherProps}
       // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: isOpen && typeof document !== 'undefined' ? document.body.clientHeight : undefined}}
+      style={{height: typeof document !== 'undefined' ? document.body.getBoundingClientRect().height : undefined}}
       className={classNames(underlayStyles, 'spectrum-Underlay', {
         'is-open': isOpen,
         'spectrum-Underlay--transparent': isTransparent

packages/@react-spectrum/s2/src/SegmentedControl.tsx

@@ -110,6 +110,7 @@ const slider = style<{isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
+  top: 0,
   left: 0,
   width: 'full',
   height: 'full',

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -510,30 +510,30 @@ function PlantModal(props: ModalOverlayProps) {
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
       {({isEntering, isExiting}) => (<>
-        {!isResized &&
-          <div
-            data-react-aria-top-layer="true"
-            className={`fixed top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
-              ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
-              ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
-            `}>
-            <svg viewBox="0 0 700 620" width={700} height={620}>
-              <Arrow textX={52} x1={88} x2={130} y={50} href="Dialog.html">Dialog</Arrow>
-              <Arrow textX={34} x1={88} x2={150} y={150} href="DropZone.html">DropZone</Arrow>
-              <Arrow textX={54} x1={88} x2={150} y={272} href="Select.html">Select</Arrow>
-              <Arrow textX={32} x1={88} x2={150} y={492} href="DatePicker.html">DatePicker</Arrow>
-              <Arrow textX={616} x1={550} x2={612} y={126} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
-              <Arrow textX={616} x1={550} x2={612} y={198} marker="markerStart" href="TextField.html">TextField</Arrow>
-              <Arrow points="560,90 590,90 590,338 612,338 590,338 590,585 560,585" textX={616} y={338} marker="none" href="Form.html">Form</Arrow>
-            </svg>
-          </div>
-        }
         {/* Inner position: sticky div sized to the visual viewport
             height so the modal appears in view.
             Note that position: fixed will not work here because this
             is positioned relative to the containing block, which is
             the ModalOverlay in this case due to backdrop-blur. */}
         <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 text-center">
+          {!isResized &&
+            <div
+              data-react-aria-top-layer="true"
+              className={`absolute top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
+                ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
+                ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
+              `}>
+              <svg viewBox="0 0 700 620" width={700} height={620}>
+                <Arrow textX={52} x1={88} x2={130} y={50} href="Dialog.html">Dialog</Arrow>
+                <Arrow textX={34} x1={88} x2={150} y={150} href="DropZone.html">DropZone</Arrow>
+                <Arrow textX={54} x1={88} x2={150} y={272} href="Select.html">Select</Arrow>
+                <Arrow textX={32} x1={88} x2={150} y={492} href="DatePicker.html">DatePicker</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={126} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={198} marker="markerStart" href="TextField.html">TextField</Arrow>
+                <Arrow points="560,90 590,90 590,338 612,338 590,338 590,585 560,585" textX={616} y={338} marker="none" href="Form.html">Form</Arrow>
+              </svg>
+            </div>
+          }
           <RACModal
             {...props}
             ref={ref}

packages/react-aria-components/docs/Disclosure.mdx

@@ -86,7 +86,7 @@ import {ChevronRight} from 'lucide-react';
   }
 
   .react-aria-Heading {
-    margin-bottom: 0;
+    margin: 0;
   }
 
   &[data-expanded] .react-aria-Button[slot=trigger] svg {
@@ -211,7 +211,7 @@ In some use cases, you may want to add an interactive element, like a button, ad
 
 ```tsx example
 <Disclosure>
-  <div style={{display: 'flex', alignItems: 'center'}}>
+  <div style={{display: 'flex', alignItems: 'center', gap: 16}}>
     <Heading>
       <Button slot="trigger">
         <ChevronRight size={18} />

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

@@ -174,7 +174,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let style = {
     ...renderProps.style,
     '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': typeof document !== 'undefined' ? document.body.clientHeight + 'px' : undefined
+    '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined
   };
 
   return (