mobile view issue

site/src/components/MediaModal.astro

@@ -68,6 +68,24 @@ import { LINKS } from "../lib/links";
   let triggerElement = null;
   let currentTargetId = null;
 
+  function showDialog() {
+    if (typeof dialog.showModal === "function") {
+      dialog.showModal();
+      return;
+    }
+
+    dialog.setAttribute("open", "");
+  }
+
+  function hideDialog() {
+    if (typeof dialog.close === "function") {
+      dialog.close();
+      return;
+    }
+
+    dialog.removeAttribute("open");
+  }
+
   // Extract video ID from YouTube URL
   function extractYoutubeId(url) {
     try {
@@ -182,7 +200,7 @@ import { LINKS } from "../lib/links";
     if (!dialog.open) return;
     
     stopPlayback();
-    dialog.close();
+    hideDialog();
 
     // Emit media_preview_close event if Umami is available
     if (typeof window.umami !== "undefined" && currentTargetId) {
@@ -370,12 +388,15 @@ import { LINKS } from "../lib/links";
     ctasEl.appendChild(viewLink);
 
     // Open the dialog
-    dialog.showModal();
+    showDialog();
   }
 
   // Listen for clicks on modal-trigger cards
   document.addEventListener("click", function(e) {
-    const card = e.target.closest("button.card[data-item-id]");
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+
+    const card = target.closest("button.card[data-item-id]");
     if (card) {
       e.preventDefault();
       openModal(card);