fix dialog propegation

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox } from '@mui/material';
+import { Button, Checkbox, Modal } from '@mui/material';
 import styled, { css } from 'styled-components';
 import { Player, Rotation } from '../../Types/Player';
 import { theme } from '../../Data/theme';
@@ -171,6 +171,8 @@ type PlayerMenuProps = {
 
 const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
   const isSide =
     player.settings.rotation === Rotation.Side ||
     player.settings.rotation === Rotation.SideFlipped;
@@ -229,6 +231,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
   const closeButtonSize = isSide ? '6vmin' : '3vmax';
 
   return (
+    <>
       <PlayerMenuWrapper $rotation={player.settings.rotation}>
         <CloseButton $rotation={player.settings.rotation}>
           <Button
@@ -421,9 +424,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                   fontSize: buttonFontSize,
                   padding: '4px',
                 }}
-              onClick={() => {
-                settingsContainerRef.current?.querySelector(`dialog`)?.show();
-              }}
+                onClick={() => dialogRef.current?.show()}
                 role="checkbox"
                 aria-checked={wakeLock.active}
                 aria-label="Reset Game"
@@ -433,39 +434,30 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
             </ButtonsSections>
           </BetterRowContainer>
           <dialog
-          id={`reset-game-${player.index}`}
+            ref={dialogRef}
             style={{
-            borderRadius: '1rem',
-            backgroundColor: theme.palette.background.default,
-            position: 'absolute',
-            top: '25%',
+              zIndex: 9999,
+              background: theme.palette.background.default,
               color: theme.palette.text.primary,
+              borderRadius: '1rem',
               border: 'none',
+              position: 'absolute',
+              top: '10%',
             }}
           >
-          <h3>Reset Game?</h3>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-evenly',
-            }}
-          >
+            <h1>Reset Game?</h1>
+            <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
               <Button
                 variant="contained"
-              onClick={() => {
-                settingsContainerRef.current?.querySelector(`dialog`)?.close();
-              }}
+                onClick={() => dialogRef.current?.close()}
               >
                 No
               </Button>
-            <Spacer width="1rem" />
               <Button
                 variant="contained"
                 onClick={() => {
                   handleResetGame();
-
-                settingsContainerRef.current?.querySelector(`dialog`)?.close();
+                  dialogRef.current?.close();
                 }}
               >
                 Yes
@@ -474,6 +466,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
           </dialog>
         </SettingsContainer>
       </PlayerMenuWrapper>
+    </>
   );
 };