From 6e21247505a795fff7bf70aa14cec2ec2d27bf34 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 24 Jan 2026 20:12:04 +0000
Subject: [PATCH] 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     | 2 +-
 components/share-nostr-modal.html     | 2 +-
 css/tailwind.source.css               | 4 ++++
 css/tokens.css                        | 1 +
 js/ui/components/EventDetailsModal.js | 2 +-
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/embed-video-modal.html b/components/embed-video-modal.html
index 87d92d78..6dcb71f3 100644
--- a/components/embed-video-modal.html
+++ b/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"
diff --git a/components/share-nostr-modal.html b/components/share-nostr-modal.html
index 2302fd56..c0182f40 100644
--- a/components/share-nostr-modal.html
+++ b/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"
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 02fbc6cf..f025a372 100644
--- a/css/tailwind.source.css
+++ b/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;
diff --git a/css/tokens.css b/css/tokens.css
index 4c7d1fae..3d4c9475 100644
--- a/css/tokens.css
+++ b/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;
diff --git a/js/ui/components/EventDetailsModal.js b/js/ui/components/EventDetailsModal.js
index 2fccc6e9..c8c35dd2 100644
--- a/js/ui/components/EventDetailsModal.js
+++ b/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;