From 2e224a5e33e615e087d4b4b264433dd32316cf10 Mon Sep 17 00:00:00 2001
From: Hidetake Iwata <int128@gmail.com>
Date: Sun, 23 Jun 2024 16:13:04 +0900
Subject: [PATCH] Fix submit of bookmark editor (#728)

---
 src/BookmarkEditor/component.css | 3 ++-
 src/Dialog/component.tsx         | 9 ++-------
 src/Preferences/component.css    | 3 ++-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/BookmarkEditor/component.css b/src/BookmarkEditor/component.css
index 41f3bc89..44f47d57 100644
--- a/src/BookmarkEditor/component.css
+++ b/src/BookmarkEditor/component.css
@@ -7,7 +7,7 @@
 dialog.BookmarkEditor {
   width: auto;
   max-width: 800px;
-  padding: var(--size-wide-gap);
+  padding: inherit;
   color: inherit;
   background-color: var(--palette-3);
   border-style: none;
@@ -22,6 +22,7 @@ dialog.BookmarkEditor::backdrop {
 .BookmarkEditor__Form {
   display: grid;
   gap: var(--size-gap);
+  padding: var(--size-wide-gap);
 }
 
 .BookmarkEditor__Group {
diff --git a/src/Dialog/component.tsx b/src/Dialog/component.tsx
index f01915d2..0cf90f19 100644
--- a/src/Dialog/component.tsx
+++ b/src/Dialog/component.tsx
@@ -29,10 +29,8 @@ const DialogComponent: FC<DialogComponentProps> = ({ children, open, onRequestCl
       className={className}
       onCancel={onRequestClose}
       onClick={(e) => {
-        if (dialogRef.current === null) {
-          return
-        }
-        if (!isClickedInRect(e, dialogRef.current.getBoundingClientRect())) {
+        // Close the dialog when the backdrop is clicked
+        if (e.target === dialogRef.current) {
           onRequestClose()
         }
       }}
@@ -46,6 +44,3 @@ const DialogComponent: FC<DialogComponentProps> = ({ children, open, onRequestCl
 }
 
 export default DialogComponent
-
-const isClickedInRect = (e: React.MouseEvent, r: DOMRect): boolean =>
-  e.clientX > r.left && e.clientX < r.right && e.clientY > r.top && e.clientY < r.bottom
diff --git a/src/Preferences/component.css b/src/Preferences/component.css
index aa64cc0c..9bd02ddb 100644
--- a/src/Preferences/component.css
+++ b/src/Preferences/component.css
@@ -5,7 +5,7 @@
 }
 
 dialog.Preferences {
-  padding: var(--size-wide-gap);
+  padding: inherit;
   color: inherit;
   background-color: var(--palette-3);
   border-style: none;
@@ -20,6 +20,7 @@ dialog.Preferences::backdrop {
 .Preferences__Form {
   display: grid;
   gap: var(--size-gap);
+  padding: var(--size-wide-gap);
 }
 
 .Preferences h2 {