mobile view issue

deploy/nginx.conf

@@ -12,7 +12,7 @@ server {
   root /usr/share/nginx/html;
   index index.html;
 
-  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.instagram.com https://*.instagram.com https://cloud.umami.is https://*.umami.is https://wa.santhoshj.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' https: data: blob:; media-src 'self' https://anchor.fm https://*.anchor.fm https://d3ctxlq1ktw2nl.cloudfront.net; connect-src 'self' https://cloud.umami.is https://*.umami.is; frame-src https://www.youtube.com https://open.spotify.com https://www.instagram.com https://*.instagram.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests" always;
+  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.instagram.com https://*.instagram.com https://cloud.umami.is https://*.umami.is https://wa.santhoshj.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' https: data: blob:; media-src 'self' https://anchor.fm https://*.anchor.fm https://d3ctxlq1ktw2nl.cloudfront.net; connect-src 'self' https://cloud.umami.is https://*.umami.is https://wa.santhoshj.com; frame-src https://www.youtube.com https://open.spotify.com https://www.instagram.com https://*.instagram.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests" always;
   add_header X-Content-Type-Options "nosniff" always;
   add_header X-Frame-Options "DENY" always;
   add_header Referrer-Policy "strict-origin-when-cross-origin" always;

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);

site/src/styles/global.css

@@ -1002,6 +1002,11 @@ button.card {
 /* --- Media Modal --- */
 
 #media-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
   max-width: 800px;
   width: calc(100vw - 48px);
   max-height: 90vh;
@@ -1024,9 +1029,11 @@ button.card {
 .media-modal-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  max-height: min(90vh, calc(100dvh - 32px));
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 .media-modal-header {
@@ -1302,10 +1309,14 @@ button.card {
 @media (max-width: 760px) {
   #media-modal {
     max-width: 96vw;
-    max-height: 94vh;
+    max-height: min(94vh, calc(100dvh - 24px));
     width: 96vw;
   }
 
+  .media-modal-content {
+    max-height: min(94vh, calc(100dvh - 24px));
+  }
+
   .media-modal-header {
     padding: 16px 20px;
   }