From 40855c2799b57cd2298b7757b429193891e194c6 Mon Sep 17 00:00:00 2001
From: PoshanP <poshan@twentyideas.com>
Date: Mon, 12 Jan 2026 11:18:49 -0800
Subject: [PATCH] fix: PDF horizontal scroll overflow in desktop view

Correct width calculation to use actual p-4 padding (32px) instead of
100px. Add overflow-x-hidden at default zoom and constrain canvas
max-width to prevent horizontal scrollbar when not zoomed above 100%.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/PdfViewer.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/components/PdfViewer.tsx b/frontend/components/PdfViewer.tsx
index 735fabf..1683b2a 100644
--- a/frontend/components/PdfViewer.tsx
+++ b/frontend/components/PdfViewer.tsx
@@ -149,7 +149,7 @@ export function PdfViewer({
         const pageAspectRatio = viewport.width / viewport.height;
 
         const containerHeight = containerRef.current!.clientHeight - 80; // Leave space for controls
-        const containerWidth = containerRef.current!.clientWidth - 100;
+        const containerWidth = containerRef.current!.clientWidth - 32; // Account for p-4 padding (16px × 2)
 
         // Calculate width that would make 80% of page height visible
         const targetHeight = containerHeight * 0.8;
@@ -328,7 +328,7 @@ export function PdfViewer({
       {/* Scrollable PDF container with all pages */}
       <div
         ref={containerRef}
-        className="flex-1 overflow-auto scroll-smooth"
+        className={`flex-1 overflow-y-auto scroll-smooth ${scale <= 1 ? 'overflow-x-hidden' : 'overflow-x-auto'}`}
       >
         <div className="flex flex-col items-center gap-4 p-4 pb-16">
           {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
@@ -338,6 +338,7 @@ export function PdfViewer({
                 if (el) canvasRefs.current.set(pageNum, el);
               }}
               className="shadow-lg bg-white"
+              style={scale <= 1 ? { maxWidth: '100%' } : undefined}
             />
           ))}
         </div>