u

src/components/PageMinimap.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
+import Portal from '@mui/material/Portal';
 import MapRoundedIcon from '@mui/icons-material/MapRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
@@ -202,18 +203,19 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
   // Collapsed: a single centered pill to reopen the overview.
   if (!open) {
     return (
-      <Box
+      <Portal>
-        sx={{
+        <Box
-          position: 'fixed',
+          sx={{
-          left: '50%',
+            position: 'fixed',
-          bottom: 16,
+            left: '50%',
-          transform: 'translateX(-50%)',
+            bottom: 16,
-          zIndex: 1300,
+            transform: 'translateX(-50%)',
-          opacity: visible ? 1 : 0,
+            zIndex: 1300,
-          transition: 'opacity 300ms ease',
+            opacity: visible ? 1 : 0,
-          pointerEvents: visible ? 'auto' : 'none',
+            transition: 'opacity 300ms ease',
-        }}
+            pointerEvents: visible ? 'auto' : 'none',
-      >
+          }}
+        >
           <IconButton
             type="button"
             size="small"
@@ -230,12 +232,14 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
           >
             <MapRoundedIcon fontSize="small" />
           </IconButton>
-      </Box>
+        </Box>
+      </Portal>
     );
   }
 
   return (
-    <Box
+    <Portal>
+      <Box
       sx={{
         position: 'fixed',
         left: '50%',
@@ -366,5 +370,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
         </Box>
       </Box>
     </Box>
-  );
+  </Portal>
+);
 }