Fix #2728

Project.toml

@@ -2,7 +2,7 @@ name = "Pluto"
 uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 license = "MIT"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.19.33"
+version = "0.19.34"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

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/[email protected]/src/svg/close-outline.svg");
 }

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]
 }

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("")

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 ?? {})