From 2b0a2486739692faa9b68e5020fde41be5e53ee2 Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Sat, 8 Jan 2022 09:59:31 -0500
Subject: [PATCH] Make toasts appear above tail popups

---
 src/ui/React/LogBoxManager.tsx |  4 +++-
 src/ui/React/Snackbar.tsx      | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 135459a70..0db405108 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -113,6 +113,8 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
+export const logBoxBaseZIndex = 1500;
+
 function LogWindow(props: IProps): React.ReactElement {
   const [script, setScript] = useState(props.script);
   const classes = useStyles();
@@ -147,7 +149,7 @@ function LogWindow(props: IProps): React.ReactElement {
   function updateLayer(): void {
     const c = container.current;
     if (c === null) return;
-    c.style.zIndex = 1500 + layerCounter + "";
+    c.style.zIndex = logBoxBaseZIndex + layerCounter + "";
     layerCounter++;
     rerender();
   }
diff --git a/src/ui/React/Snackbar.tsx b/src/ui/React/Snackbar.tsx
index a566767d8..68b98e945 100644
--- a/src/ui/React/Snackbar.tsx
+++ b/src/ui/React/Snackbar.tsx
@@ -1,16 +1,27 @@
 import React, { useEffect } from "react";
 import { useSnackbar, SnackbarProvider as SB } from "notistack";
+import makeStyles from "@mui/styles/makeStyles";
 import { EventEmitter } from "../../utils/EventEmitter";
 import Alert from "@mui/material/Alert";
 import Paper from "@mui/material/Paper";
+import { logBoxBaseZIndex } from "./LogBoxManager";
 
 interface IProps {
   children: React.ReactNode | React.ReactNode[];
 }
 
+const useStyles = makeStyles(() => ({
+  snackbar: {
+    // Log popup z-index increments, so let's add a padding to be well above them.
+    zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
+  }
+}));
+
 export function SnackbarProvider(props: IProps): React.ReactElement {
+  const classes = useStyles();
   return (
-    <SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}>
+    <SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}
+      classes={{ containerRoot: classes.snackbar }}>
       {props.children}
     </SB>
   );