diff --git a/bookwyrm/static/css/bookwyrm/components/_details.scss b/bookwyrm/static/css/bookwyrm/components/_details.scss
index c9a0b33b8..de29629c8 100644
--- a/bookwyrm/static/css/bookwyrm/components/_details.scss
+++ b/bookwyrm/static/css/bookwyrm/components/_details.scss
@@ -67,7 +67,7 @@ details.dropdown .dropdown-menu a:focus-visible {
         align-items: center;
         justify-content: center;
         pointer-events: none;
-        z-index: 100;
+        z-index: 35;
     }
 
     details .dropdown-menu > * {
diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index 95271795d..aa06a8b0a 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -38,11 +38,12 @@ let BookWyrm = new (class {
             .querySelectorAll("[data-modal-open]")
             .forEach((node) => node.addEventListener("click", this.handleModalButton.bind(this)));
 
-        document
-            .querySelectorAll("details.dropdown")
-            .forEach((node) =>
-                node.addEventListener("toggle", this.handleDetailsDropdown.bind(this))
+        document.querySelectorAll("details.dropdown").forEach((node) => {
+            node.addEventListener("toggle", this.handleDetailsDropdown.bind(this));
+            node.querySelectorAll("[data-modal-open]").forEach((modal_node) =>
+                modal_node.addEventListener("click", () => (node.open = false))
             );
+        });
 
         document
             .querySelector("#barcode-scanner-modal")