Fix submit of bookmark editor (#728)

Author: int128

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 {

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

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 {