From 7d3fd237080d621fcd059f1c9e57e382e6cb289c Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 6 Dec 2023 16:51:15 +0100
Subject: [PATCH] Fix #2728

---
 Project.toml                            |  2 +-
 frontend/binder.css                     | 11 ++++++-----
 frontend/common/useDialog.js            | 19 +------------------
 frontend/components/EditOrRunButton.js  |  2 +-
 frontend/components/FrontmatterInput.js |  2 +-
 5 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/Project.toml b/Project.toml
index 6650eaa094..2f66dbe281 100644
--- a/Project.toml
+++ b/Project.toml
@@ -2,7 +2,7 @@ name = "Pluto"
 uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 license = "MIT"
 authors = ["Fons van der Plas <fons@plutojl.org>"]
-version = "0.19.33"
+version = "0.19.34"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
diff --git a/frontend/binder.css b/frontend/binder.css
index 4d6f1c6646..1aadb93ec2 100644
--- a/frontend/binder.css
+++ b/frontend/binder.css
@@ -160,11 +160,12 @@ body.wiggle_binder .edit_or_run > button {
 
 .binder_help_text .close {
     position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 24px;
-    height: 24px;
-    background-size: 24px 24px;
+    --size: 32px;
+    top: 5px;
+    right: 5px;
+    width: var(--size);
+    height: var(--size);
+    background-size: var(--size) var(--size);
     cursor: pointer;
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/close-outline.svg");
 }
diff --git a/frontend/common/useDialog.js b/frontend/common/useDialog.js
index 176c5a99a0..3c03f5fb70 100644
--- a/frontend/common/useDialog.js
+++ b/frontend/common/useDialog.js
@@ -6,7 +6,7 @@ import { useEffect, useLayoutEffect, useRef } from "../imports/Preact.js"
 /**
  * @returns {[import("../imports/Preact.js").Ref<HTMLDialogElement?>, () => void, () => void, () => void]}
  */
-export const useDialog = ({ light_dismiss = false } = {}) => {
+export const useDialog = () => {
     const dialog_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
 
     useLayoutEffect(() => {
@@ -17,22 +17,5 @@ export const useDialog = ({ light_dismiss = false } = {}) => {
     const close = () => dialog_ref.current?.close()
     const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
 
-    useEffect(() => {
-        if (light_dismiss) {
-            const handleclick = (e) => {
-                if (dialog_ref.current?.open && dialog_ref.current.contains(e.target)) {
-                    close()
-                    // Avoid activating whatever was below
-                    e.stopPropagation()
-                    e.preventDefault()
-                }
-            }
-            document.body.addEventListener("click", handleclick)
-            return () => {
-                document.body.removeEventListener("click", handleclick)
-            }
-        }
-    }, [dialog_ref.current])
-
     return [dialog_ref, open, close, toggle]
 }
diff --git a/frontend/components/EditOrRunButton.js b/frontend/components/EditOrRunButton.js
index c6282d4127..c64da7e163 100644
--- a/frontend/components/EditOrRunButton.js
+++ b/frontend/components/EditOrRunButton.js
@@ -33,7 +33,7 @@ export const RunLocalButton = ({ show, start_local }) => {
  * }} props
  * */
 export const BinderButton = ({ offer_binder, start_binder, notebookfile, notebook }) => {
-    const [dialog_ref, openModal, closeModal, toggleModal] = useDialog({ light_dismiss: true })
+    const [dialog_ref, openModal, closeModal, toggleModal] = useDialog()
 
     const [showCopyPopup, setShowCopyPopup] = useState(false)
     const notebookfile_ref = useRef("")
diff --git a/frontend/components/FrontmatterInput.js b/frontend/components/FrontmatterInput.js
index ca99e40da8..26ce5dabd6 100644
--- a/frontend/components/FrontmatterInput.js
+++ b/frontend/components/FrontmatterInput.js
@@ -35,7 +35,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
             })
         )
 
-    const [dialog_ref, open, close, _toggle] = useDialog({ light_dismiss: false })
+    const [dialog_ref, open, close, _toggle] = useDialog()
 
     const cancel = () => {
         set_frontmatter(remote_frontmatter ?? {})