fix(ui): ensure modals render above video player

- Adds --z-modal-always-top: 200 token in css/tokens.css
- Adds .modal-always-on-top utility class in css/tailwind.source.css
- Applies class to EventDetailsModal, EmbedVideoModal, and ShareNostrModal

components/embed-video-modal.html

@@ -1,7 +1,7 @@
 <!-- components/embed-video-modal.html -->
 <div
   id="embedVideoModal"
-  class="bv-modal hidden items-start justify-center md:items-center"
+  class="bv-modal modal-always-on-top hidden items-start justify-center md:items-center"
   role="dialog"
   aria-modal="true"
   aria-labelledby="embedVideoModalTitle"

components/share-nostr-modal.html

@@ -1,7 +1,7 @@
 <!-- components/share-nostr-modal.html -->
 <div
   id="shareNostrModal"
-  class="bv-modal hidden items-start justify-center md:items-center"
+  class="bv-modal modal-always-on-top hidden items-start justify-center md:items-center"
   role="dialog"
   aria-modal="true"
   aria-labelledby="shareNostrModalTitle"

css/tailwind.source.css

@@ -3793,6 +3793,10 @@
     z-index: var(--z-modal-content);
   }
 
+  .modal-always-on-top {
+    z-index: var(--z-modal-always-top) !important;
+  }
+
   #playerModal {
     position: fixed;
     inset: 0;

css/tokens.css

@@ -210,6 +210,7 @@
   --z-modal-peak-root: 165;
   --z-modal-peak-overlay: 175;
   --z-modal-peak-content: 185;
+  --z-modal-always-top: 200;
   --overlay-backdrop-color: var(--color-overlay-backdrop);
   --overlay-backdrop-blur: 12px;
   --sidebar-width-expanded-base: 16rem;

js/ui/components/EventDetailsModal.js

@@ -135,7 +135,7 @@ export class EventDetailsModal {
     const container = this.document.getElementById("modalContainer") || this.document.body;
     const modal = this.document.createElement("div");
     modal.id = "eventDetailsModal";
-    modal.className = "bv-modal z-[140] hidden items-center justify-center p-4";
+    modal.className = "bv-modal modal-always-on-top hidden items-center justify-center p-4";
     modal.innerHTML = this.buildMarkup();
 
     this.root = modal;