From 7d792fe635fe3fac4621a114a90e47ec79af9b99 Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Thu, 18 Dec 2025 08:48:53 -0700
Subject: [PATCH] Simplify PDF viewer to match v1.0 - remove wrapper div for
 mobile scrolling

---
 resources/js/Components/PDFViewer.vue | 68 ++++++++-------------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/resources/js/Components/PDFViewer.vue b/resources/js/Components/PDFViewer.vue
index 6ae60ba5..38dc44ec 100644
--- a/resources/js/Components/PDFViewer.vue
+++ b/resources/js/Components/PDFViewer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { watch } from 'vue';
 
 interface Props {
     isOpen: boolean;
@@ -12,26 +12,6 @@ const emit = defineEmits<{
     close: [];
 }>();
 
-const isMobile = ref(false);
-const isPortrait = ref(false);
-
-// Check if device is mobile/tablet and orientation
-const checkDevice = () => {
-    isMobile.value = window.innerWidth < 1024; // Less than 1024px = mobile/tablet
-    isPortrait.value = window.innerHeight > window.innerWidth; // Portrait mode
-};
-
-onMounted(() => {
-    checkDevice();
-    window.addEventListener('resize', checkDevice);
-    window.addEventListener('orientationchange', checkDevice);
-});
-
-onUnmounted(() => {
-    window.removeEventListener('resize', checkDevice);
-    window.removeEventListener('orientationchange', checkDevice);
-});
-
 // Handle body scroll lock when modal is open
 watch(() => props.isOpen, (isOpen) => {
     if (isOpen) {
@@ -55,44 +35,38 @@ const handleDownload = () => {
 <template>
     <div
         v-if="isOpen"
-        class="fixed inset-0 bg-black/75 flex items-center justify-center z-50"
-        :class="isMobile ? 'p-2' : 'p-4'"
+        class="fixed inset-0 bg-black/75 flex items-center justify-center z-50 p-4"
         @click="handleBackdropClick"
     >
         <div
-            class="bg-white rounded-lg flex flex-col shadow-2xl"
-            :class="isMobile ? 'w-full h-full' : 'w-[95%] h-[95%] max-w-[1200px] max-h-[900px]'"
+            class="bg-white rounded-lg w-[95%] h-[95%] max-w-[1200px] max-h-[900px] flex flex-col shadow-2xl"
             @click.stop
         >
             <!-- Header -->
-            <div class="flex items-center justify-between border-b bg-[#394053] rounded-t-lg"
-                 :class="isMobile ? 'px-3 py-2' : 'px-6 py-4'">
-                <div class="flex items-center gap-2 min-w-0 flex-1">
-                    <svg class="w-5 h-5 text-white flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="flex items-center justify-between px-6 py-4 border-b bg-[#394053] rounded-t-lg">
+                <div class="flex items-center gap-3">
+                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
-                    <h2 class="font-semibold text-white truncate"
-                        :class="isMobile ? 'text-sm' : 'text-lg'">
+                    <h2 class="text-lg font-semibold text-white">
                         {{ documentTitle }}
                     </h2>
                 </div>
-                <div class="flex items-center gap-1 flex-shrink-0">
+                <div class="flex items-center gap-2">
                     <button
                         @click="handleDownload"
-                        class="flex items-center gap-1 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors font-medium"
-                        :class="isMobile ? 'px-2 py-1 text-xs' : 'px-4 py-2 text-sm gap-2'"
+                        class="flex items-center gap-2 px-4 py-2 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors text-sm font-medium"
                     >
-                        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                         </svg>
-                        <span v-if="!isMobile || !isPortrait">Download</span>
+                        Download
                     </button>
                     <button
                         @click="emit('close')"
-                        class="flex items-center justify-center text-white hover:bg-white/10 rounded-md transition-colors"
-                        :class="isMobile ? 'w-8 h-8' : 'w-10 h-10'"
+                        class="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-md transition-colors"
                     >
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
@@ -100,16 +74,12 @@ const handleDownload = () => {
             </div>
 
             <!-- PDF Content -->
-            <div class="flex-1 bg-gray-50"
-                 :class="isMobile ? 'p-1' : 'p-4'">
-                <div class="w-full h-full overflow-auto rounded-md bg-white" style="-webkit-overflow-scrolling: touch;">
-                    <iframe
-                        :src="`${documentUrl}#view=FitH&toolbar=1&navpanes=0&scrollbar=1`"
-                        class="w-full border-0 bg-white"
-                        :style="{ minHeight: isMobile ? '200vh' : '100%', height: isMobile ? 'auto' : '100%' }"
-                        :title="documentTitle"
-                    />
-                </div>
+            <div class="flex-1 p-4 bg-gray-50">
+                <iframe
+                    :src="`${documentUrl}#view=FitH&toolbar=1&navpanes=1&scrollbar=1`"
+                    class="w-full h-full border-0 rounded-md bg-white"
+                    :title="documentTitle"
+                />
             </div>
         </div>
     </div>