From 37e0ad9f5840993da906f1e1c3428078f9296e97 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Thu, 16 Sep 2021 15:18:58 -0700
Subject: [PATCH] Fix event viewer positioning

---
 src/DevTools.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/DevTools.jsx b/src/DevTools.jsx
index 8be9eb34..c51c0818 100644
--- a/src/DevTools.jsx
+++ b/src/DevTools.jsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import ColorHash from "color-hash";
 import classNames from "classnames";
 import styles from "./DevTools.module.css";
@@ -221,7 +222,7 @@ function EventViewer({ event, onClose }) {
   const { call_id, invitee } = event.getContent();
   const json = event.toJSON();
 
-  return (
+  return createPortal(
     <div className={styles.eventViewer}>
       <p>Event Type: {type}</p>
       <p>Sender: {sender}</p>
@@ -238,6 +239,7 @@ function EventViewer({ event, onClose }) {
       <p>Raw Event:</p>
       <pre className={styles.content}>{JSON.stringify(json, undefined, 2)}</pre>
       <button onClick={onClose}>Close</button>
-    </div>
+    </div>,
+    document.body
   );
 }