From 482af0c8624c66e330106a3ba99ffde4e32fdd84 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 4 Jun 2025 18:19:42 +0200
Subject: [PATCH] Replace embed with iframe for better PDF preview support

Switch from embed to iframe element for displaying PDFs to improve
cross-browser compatibility and mobile experience. Add responsive
styling with proper positioning and iOS smooth scrolling support.
Adjust preview container heights for mobile devices.
---
 components/FilePreviewModal.vue | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/FilePreviewModal.vue b/components/FilePreviewModal.vue
index 269579f..b2e12ba 100644
--- a/components/FilePreviewModal.vue
+++ b/components/FilePreviewModal.vue
@@ -50,11 +50,12 @@
         
         <!-- PDF Preview -->
         <div v-else-if="isPdf" class="pdf-preview-container">
-          <embed
+          <iframe
             :src="previewUrl"
-            type="application/pdf"
             width="100%"
             height="100%"
+            frameborder="0"
+            class="pdf-iframe"
           />
         </div>
       </v-card-text>
@@ -255,5 +256,28 @@ onUnmounted(() => {
   width: 100%;
   height: 70vh;
   overflow: hidden;
+  position: relative;
+}
+
+.pdf-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
+  overflow: auto;
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 600px) {
+  .pdf-preview-container {
+    height: 60vh; /* Slightly smaller on mobile for better UX */
+  }
+  
+  .image-preview-container {
+    min-height: 300px;
+    max-height: 60vh;
+  }
 }
 </style>