docs: fix S2 docs mobile search bugs (#8964)

* fix mobile search modal position

* only show mobile ToC if there are 1 or more subheadings

Author: reidbarber

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

@@ -29,7 +29,7 @@ interface ModalProps extends ModalOverlayProps {
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'absolute',
+  position: 'fixed',
   top: 0,
   left: 0,
   width: 'full',

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

@@ -120,7 +120,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           })}>
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
-            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
+            toc={(currentPage.tableOfContents?.[0]?.children?.length ?? 0) > 0 ? <MobileToc key="toc" toc={currentPage.tableOfContents ?? []} /> : null}
             pages={pages}
             currentPage={currentPage} />
           <div className={style({display: 'flex', width: 'full'})}>

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

@@ -130,28 +130,30 @@ export function MobileHeader({toc, pages, currentPage}) {
             marginY: 0,
             ...animation
           })}
-          style={{
+          style={toc ? {
             animationName: fadeOut,
             animationTimeline: 'scroll()',
             animationRange
-          } as CSSProperties}>
+          } as CSSProperties : undefined}>
           React Aria
         </h2>
       </div>
-      <div
-        className={style({
-          ...animation,
-          position: 'absolute',
-          left: '50%',
-          translateX: '-50%'
-        })}
-        style={{
-          animationName: fadeIn,
-          animationTimeline: 'scroll()',
-          animationRange
-        } as CSSProperties}>
-        {toc}
-      </div>
+      {toc && (
+        <div
+          className={style({
+            ...animation,
+            position: 'absolute',
+            left: '50%',
+            translateX: '-50%'
+          })}
+          style={{
+            animationName: fadeIn,
+            animationTimeline: 'scroll()',
+            animationRange
+          } as CSSProperties}>
+          {toc}
+        </div>
+      )}
       <DialogTrigger>
         <ActionButton aria-label="Navigation" isQuiet>
           <MenuHamburger />