From e0ae22cf6344dbe476fee18a5aba1b6633f02d0e Mon Sep 17 00:00:00 2001
From: ggq-admin <admin@ggq.local>
Date: Mon, 20 Oct 2025 09:32:17 +0200
Subject: [PATCH] Fix PDF text selection in document viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added explicit z-index stacking order:
  - Text layer: z-index 2 (top, for selectable text)
  - Image overlays: z-index 1 (below text layer)
  - Image overlays on hover: z-index 20 (brings to front)

- Enhanced text layer CSS with cross-browser support:
  - Added -webkit-user-select, -moz-user-select, -ms-user-select
  - Added pointer-events: auto to text layer spans
  - Ensures text is selectable on all browsers

- Fixed image overlay z-index from 10 to 1
  - Prevents blocking text selection
  - Images still clickable, but text layer takes precedence

- Added user-select: auto to body and #app in main.css
  - Ensures text selection is enabled globally

This fixes the issue where text was not selectable in the PDF viewer,
especially for digitized/text-based PDFs. The PDF.js text layer now
properly overlays the canvas and allows text selection while keeping
image overlays interactive.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 client/src/assets/main.css             | 4 ++++
 client/src/components/ImageOverlay.vue | 3 ++-
 client/src/views/DocumentView.vue      | 8 ++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index 82ad9a9..8bb55db 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -13,12 +13,16 @@
 
   body {
     @apply font-sans antialiased bg-black text-white;
+    user-select: auto;
+    -webkit-user-select: auto;
   }
 
   /* Dark gradient background for app container */
   #app {
     background: linear-gradient(135deg, #1a0b2e 0%, #0a0118 50%, #000000 100%);
     min-height: 100vh;
+    user-select: auto;
+    -webkit-user-select: auto;
   }
 
   /* Smooth scrolling */
diff --git a/client/src/components/ImageOverlay.vue b/client/src/components/ImageOverlay.vue
index a51ae8c..d31204b 100644
--- a/client/src/components/ImageOverlay.vue
+++ b/client/src/components/ImageOverlay.vue
@@ -95,7 +95,7 @@ const overlayStyle = computed(() => {
     width: `${width}px`,
     height: `${height}px`,
     cursor: 'pointer',
-    zIndex: 10
+    zIndex: 1
   }
 })
 
@@ -109,6 +109,7 @@ function handleClick(event) {
 .image-overlay {
   position: absolute;
   transition: all 0.2s ease;
+  pointer-events: auto;
 }
 
 .image-overlay:hover {
diff --git a/client/src/views/DocumentView.vue b/client/src/views/DocumentView.vue
index 24efa6f..b52c76f 100644
--- a/client/src/views/DocumentView.vue
+++ b/client/src/views/DocumentView.vue
@@ -451,6 +451,10 @@ onBeforeUnmount(() => {
   line-height: 1.0;
   pointer-events: auto;
   user-select: text;
+  z-index: 2;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
 }
 
 .textLayer > span {
@@ -460,6 +464,10 @@ onBeforeUnmount(() => {
   cursor: text;
   transform-origin: 0% 0%;
   user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  pointer-events: auto;
 }
 
 .textLayer ::selection {