changes

app/components/Modal.vue

@@ -5,7 +5,7 @@
   >
     <div
       :id="id"
-      class="modal is-active has-text-text-20"
+      class="modal is-active"
     >
       <div
         class="modal-background"
@@ -99,7 +99,6 @@ watchEffect(() => {
 });
 
 const id = useId();
-let count = 0;
 
 function closeModal() {
   const modals = document.getElementById("modals");
@@ -121,18 +120,19 @@ const modalEvent = function (ev) {
   }
 };
 
+function closeOnEsc(e) {
+  if (e.key === "Escape") closeModal();
+}
+
 onMounted(() => {
+  window.addEventListener("keydown", closeOnEsc);
   document.documentElement.classList.add("is-clipped");
-  window.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") closeModal();
-  });
-  const collection = document.getElementsByClassName("modal-background");
-  count = collection.length;
 });
 
 onUnmounted(() => {
-  count--;
-  if (count === 0) document.documentElement.classList.remove("is-clipped");
+  window.removeEventListener("keydown", closeOnEsc);
+  const remaining = document.getElementsByClassName("modal-background").length;
+  if (remaining === 0) document.documentElement.classList.remove("is-clipped");
 });
 </script>
 <style scoped>