EDS-406 Auth | Fix auth modal (or point to issue) (#107)

* eds-406 fixed problem connect with dialog * eds-406 fixed Lint --------- Co-authored-by: Abrasimov Yaroslav <[email protected]>
hlxsites · Sep 30, 2024 · 4d0cadb · 4d0cadb
1 parent 685ab6d
commit 4d0cadb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 52 deletions.
diff --git a/blocks/modal/modal.css b/blocks/modal/modal.css
@@ -1,53 +1,53 @@
 body.modal-open {
-    overflow: hidden;
-  }
-
+  overflow: hidden;
+}
+
+.modal dialog {
+  --dialog-border-radius: 16px;
+
+  padding: 0;
+  overscroll-behavior: none;
+  border: 1px solid #ccc;
+  border-radius: var(--dialog-border-radius);
+  width: 100vw;
+}
+
+.modal dialog .modal-content {
+  overflow-y: auto;
+  overscroll-behavior: none;
+  max-height: calc(100dvh - 60px);
+}
+
+@media (width >= 600px) {
   .modal dialog {
-    --dialog-border-radius: 16px;
-
-    overscroll-behavior: none;
-    border: 1px solid #ccc;
-    border-radius: var(--dialog-border-radius);
-    width: 100vw;
+    width: 80vw;
+    max-width: 730px;
   }
-  
+
   .modal dialog .modal-content {
-    overflow-y: auto;
-    overscroll-behavior: none;
-    max-height: calc(100dvh - 60px);
-  }
-
-  @media (width >= 600px) {
-    .modal dialog {
-      padding: 30px;
-      width: 80vw;
-      max-width: 700px;
-    }
-
-    .modal dialog .modal-content {
-      max-height: calc(100vh - 90px);
-    }
-  }
-
-  .modal dialog::backdrop {
-    background-color: rgb(0 0 0 / 50%);
+    max-height: calc(100vh - 90px);
   }
-
-  .modal .close-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    max-height: 54px;
-    border-radius: 0 var(--dialog-border-radius) 0 0;
-    background-color: unset;
-    text-overflow: clip;
-    margin: 0;
-    border: none;
-    padding-right: 30px;
-  }
-
-  .modal dialog .section {
-    padding: 0;
-  }
+}
+
+.modal dialog::backdrop {
+  background-color: rgb(0 0 0 / 50%);
+}
+
+.modal .close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  max-height: 54px;
+  border-radius: 0 var(--dialog-border-radius) 0 0;
+  background-color: unset;
+  text-overflow: clip;
+  margin: 0;
+  border: none;
+  padding-right: 30px;
+}
+
+.modal dialog .section {
+  padding: 0;
+}
diff --git a/blocks/modal/modal.js b/blocks/modal/modal.js
@@ -23,11 +23,8 @@ export async function createModal(contentNodes) {
   closeButton.addEventListener('click', () => dialog.close());
   dialog.append(closeButton);
 
-  // close dialog on clicks outside the dialog. https://stackoverflow.com/a/70593278/79461
   dialog.addEventListener('click', (event) => {
-    const dialogDimensions = dialog.getBoundingClientRect();
-    if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right
-      || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+    if (event.target === dialog) {
       dialog.close();
     }
   });