From c16af23f21d972db1ed7955484f34d6e3b6f4068 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Wed, 23 Sep 2020 00:57:03 +0100
Subject: [PATCH] Fix React modal error.

---
 src/showplanner/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index bacb975..178cb22 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -42,6 +42,7 @@ import { OptionsMenu } from "../optionsMenu";
 import { WelcomeModal } from "./WelcomeModal";
 import { PisModal } from "./PISModal";
 import "./channel.scss";
+import Modal from "react-modal";
 
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
@@ -196,6 +197,10 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     planSaveError,
     planSaving,
   } = useSelector((state: RootState) => state.showplan);
+
+  // Tell Modals that #root is the main page content, for accessability reasons.
+  Modal.setAppElement('#root');
+
   const session = useSelector((state: RootState) => state.session);
 
   const [showWelcomeModal, setShowWelcomeModal] = useState(