diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index 018f16789de..fdf5bcb831f 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/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',
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index f27827e874c..bd0df3ec68c 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/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'})}>
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index d7f2d39cb1b..9a4733b4690 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/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 />