Fix modal/panel behaviour

src/App.jsx

@@ -36,6 +36,8 @@ const App = () => {
         draggable
         pauseOnHover
       />
+      <div id="panel-container" />
+      <div id="modal-container" />
     </Suspense>
   );
 };

src/index.css

@@ -28,7 +28,8 @@ body {
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
-.blurry .sync-board {
+.blurry .sync-board,
+.blurry #panel-container {
   filter: blur(3px);
 }
 

src/ui/SidePanel.jsx

@@ -107,8 +107,14 @@ const SidePanel = ({
   width,
 }) => {
   const { t } = useTranslation();
+
+  const [bindTo] = React.useState(() =>
+    document.getElementById(modal ? "modal-container" : "panel-container")
+  );
+
   const { ref, Portal, openPortal, closePortal, isOpen } = usePortal({
     closeOnOutsideClick: modal,
+    bindTo,
   });
 
   const onAnimationEnd = React.useCallback(() => {

src/views/BoardView/EditInfoButton.jsx

@@ -34,7 +34,7 @@ const BoardConfigPanel = ({ BoardFormComponent, show, setShow }) => {
   return (
     <SidePanel
       title={t("Edit game information")}
-      setShow={setShow}
+      onClose={() => setShow(false)}
       show={show}
       position="left"
     >