From f781579d5dda66dc374dbfcb87e4db66787baa71 Mon Sep 17 00:00:00 2001
From: HenestrosaDev <henestrosadev@gmail.com>
Date: Fri, 14 Jun 2024 15:40:43 +0200
Subject: [PATCH] Fix `SimplePdfReader` for screens below the `md` breakpoint

---
 .../js/Components/Common/SimplePdfReader.vue  | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/resources/js/Components/Common/SimplePdfReader.vue b/resources/js/Components/Common/SimplePdfReader.vue
index 6f22f57..bdba556 100644
--- a/resources/js/Components/Common/SimplePdfReader.vue
+++ b/resources/js/Components/Common/SimplePdfReader.vue
@@ -105,8 +105,8 @@ const renderTextLayer = (textContent, viewport) => {
 	// Get canvas offset
 	const rect = $canvas.value.getBoundingClientRect();
 	const canvasOffset = {
-		top: rect.top + window.scrollY,
-		left: rect.left + window.scrollX,
+		top: rect.top + window.scrollY - 20,
+		left: rect.left + window.scrollX - 20,
 	};
 
 	// Clear HTML for text layer
@@ -188,22 +188,24 @@ const onWheel = (event) => {
 
 <template>
 	<div class="h-screen w-full bg-[#222]">
-		<main class="w-full overflow-auto bg-[#222] p-5 pb-20">
-			<canvas
-				ref="$canvas"
-				class="m-auto"
-			>
-				{{ trans("pdf_reader.unsupported_canvas") }}
-			</canvas>
-			<div
-				ref="$textLayerDiv"
-				class="text-layer"
-				@wheel="shouldZoomOnWheel && onWheel($event)"
-			/>
+		<main class="w-full bg-[#222] p-5 pb-20">
+			<div class="relative w-full overflow-x-auto overflow-y-hidden bg-[#222]">
+				<canvas
+					ref="$canvas"
+					class="m-auto"
+				>
+					{{ trans("pdf_reader.unsupported_canvas") }}
+				</canvas>
+				<div
+					ref="$textLayerDiv"
+					class="text-layer"
+					@wheel="shouldZoomOnWheel && onWheel($event)"
+				/>
+			</div>
 		</main>
 
 		<footer
-			class="fixed bottom-0 left-0 right-0 z-50 h-16 w-full bg-[#2d2d2d] px-4 text-skin-white sm:px-8"
+			class="fixed bottom-0 left-0 right-0 z-50 h-16 w-screen bg-[#2d2d2d] px-4 text-skin-white sm:px-8"
 		>
 			<ul class="flex h-full w-full list-none items-center justify-between">
 				<li class="flex grow basis-0 items-center">