Merge pull request #3620 from nickofolas/fix/modal-z-index

UI: Fix z-index of modals overriding everything

src/ui/InteractiveTutorial/NSSelection.tsx

@@ -35,7 +35,7 @@ export function NSSelection(props: IProps): React.ReactElement {
   }
 
   return (
-    <Modal open={props.open} onClose={props.onClose}>
+    <Modal open={props.open} onClose={props.onClose} sx={{ zIndex: 999999 }}>
       <Tabs variant="fullWidth" value={value} onChange={handleChange}>
         <Tab label="NS1" />
         <Tab label="NS2" />

src/ui/React/Modal.tsx

@@ -1,10 +1,11 @@
-import React from "react";
 import { Theme } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
-import M from "@mui/material/Modal";
-import Fade from "@mui/material/Fade";
 import Box from "@mui/material/Box";
+import Fade from "@mui/material/Fade";
+import M from "@mui/material/Modal";
+import createStyles from "@mui/styles/createStyles";
+import makeStyles from "@mui/styles/makeStyles";
+import { SxProps } from "@mui/system";
+import React from "react";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -12,7 +13,6 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      zIndex: 999999,
     },
     paper: {
       backgroundColor: theme.palette.background.default,
@@ -35,6 +35,7 @@ interface IProps {
   open: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  sx?: SxProps<Theme>;
 }
 
 export const Modal = (props: IProps): React.ReactElement => {
@@ -49,6 +50,7 @@ export const Modal = (props: IProps): React.ReactElement => {
       onClose={props.onClose}
       closeAfterTransition
       className={classes.modal}
+      sx={props.sx}
     >
       <Fade in={props.open}>
         <div className={classes.paper}>