fix(S2): fix Modal position and S2 docs modal style (#9007)

* revert S2 modal position change

* fix S2 docs menu modal position

* s2: fix ModalProps types

Author: reidbarber

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

@@ -12,13 +12,13 @@
 
 import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-interface ModalProps extends ModalOverlayProps {
+interface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | keyof GlobalDOMAttributes> {
   /**
    * The size of the Modal.
    *
@@ -29,7 +29,7 @@ interface ModalProps extends ModalOverlayProps {
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
+  position: 'absolute',
   top: 0,
   left: 0,
   width: 'full',

packages/dev/s2-docs/src/MobileHeader.tsx

@@ -162,7 +162,7 @@ export function MobileHeader({toc, pages, currentPage}) {
         <ActionButton aria-label="Navigation" isQuiet>
           <MenuHamburger />
         </ActionButton>
-        <Modal size="fullscreenTakeover" style={{zIndex: 100, height: '100dvh'}}>
+        <Modal size="fullscreenTakeover">
           <MobileSearchMenu pages={pages} currentPage={currentPage} />
         </Modal>
       </DialogTrigger>