Enhance PDFViewer for Chrome mobile: Implemented detection for Chrome mobile browsers to hide the PDF iframe and display a fallback message, improving user experience on mobile devices. Added relevant data attributes for better handling of mobile-specific behavior.

Author: AhmedAlfahdi

src/components/PDFViewer.astro

@@ -51,7 +51,16 @@ const {
   document.addEventListener('DOMContentLoaded', function() {
     const wrappers = document.querySelectorAll('[data-pdf-wrapper]');
 
+    // Detect Chrome mobile (Chrome mobile intercepts PDFs and shows download prompt)
+    const isChromeMobile = /Android.*Chrome|CriOS/i.test(navigator.userAgent) && 
+                           'ontouchstart' in window;
+    
     wrappers.forEach(wrapper => {
+      // Mark Chrome mobile wrappers
+      if (isChromeMobile) {
+        wrapper.setAttribute('data-chrome-mobile', 'true');
+      }
+      
       const iframe = wrapper.querySelector('[data-pdf-iframe]');
       const titleElement = wrapper.querySelector('[data-pdf-title]');
       const errorMessage = wrapper.querySelector('.pdf-error-message');
@@ -67,6 +76,11 @@ const {
         iframe.style.display = 'none';
       };
 
+      // On Chrome mobile, hide iframe immediately (it will show download prompt anyway)
+      if (isChromeMobile) {
+        iframe.style.display = 'none';
+      }
+      
       // Check if PDF loads successfully
       iframe.addEventListener('load', () => {
         setTimeout(() => {
@@ -247,4 +261,12 @@ const {
       }
     }
   }
+
+  /* Chrome mobile: hide iframe (Chrome mobile intercepts PDFs and shows download prompt) */
+  .pdf-viewer-wrapper[data-chrome-mobile] .pdf-frame {
+    display: none !important;
+  }
+  .pdf-viewer-wrapper[data-chrome-mobile] .pdf-mobile-fallback {
+    display: block !important;
+  }
 </style>