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