fix zooming out

frontend/src/components/UploadPage.jsx

@@ -31,9 +31,10 @@ function UploadPage() {
             setCurrentPage(newPage);
         }
 
-        // Track visible pages (current + adjacent for smooth scrolling)
+        // Track visible pages based on zoom level (more pages visible when zoomed out)
         const newVisiblePages = new Set();
-        for (let i = Math.max(1, newPage - 1); i <= Math.min(numPages, newPage + 1); i++) {
+        const visibleRange = Math.max(1, Math.ceil(2 / zoomLevel)); // More pages when zoomed out
+        for (let i = Math.max(1, newPage - visibleRange); i <= Math.min(numPages, newPage + visibleRange); i++) {
             newVisiblePages.add(i);
         }
         
@@ -50,7 +51,8 @@ function UploadPage() {
         
         // Update visible pages immediately for target page
         const newVisiblePages = new Set();
-        for (let i = Math.max(1, pageNumber - 1); i <= Math.min(numPages, pageNumber + 1); i++) {
+        const visibleRange = Math.max(1, Math.ceil(2 / zoomLevel)); // More pages when zoomed out
+        for (let i = Math.max(1, pageNumber - visibleRange); i <= Math.min(numPages, pageNumber + visibleRange); i++) {
             newVisiblePages.add(i);
         }
         setVisiblePages(newVisiblePages);
@@ -107,29 +109,31 @@ function UploadPage() {
                 {/* PDF container with scrolling */}
                     <div 
                         ref={pdfContainerRef}
-                        className="flex-1 overflow-auto flex justify-center items-start bg-gray-100"
+                        className="flex-1 overflow-auto flex justify-center bg-gray-100"
                         onScroll={handleScroll}
                     >
-                        <Document
-                            file={selectedFile}
-                            onLoadSuccess={({ numPages }) => setNumPages(numPages)}
-                        >
-                            {/* Render all pages continuously */}
-                            {numPages && Array.from(new Array(numPages), (_, index) => {
-                                const pageNum = index + 1;
-                                const isVisible = visiblePages.has(pageNum);
-                                const currentZoom = isVisible ? zoomLevel : 1; // Only zoom visible pages
-                                
-                                return (
-                                    <div key={pageNum} className="mb-4">
-                                        <Page 
-                                            pageNumber={pageNum} 
-                                            width={typeof window !== 'undefined' ? window.innerWidth * 0.66 * 0.9 * currentZoom : 600 * currentZoom}
-                                        />
-                                    </div>
-                                );
-                            })}
-                        </Document>
+                        <div className="py-4">
+                            <Document
+                                file={selectedFile}
+                                onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+                            >
+                                {/* Render all pages continuously */}
+                                {numPages && Array.from(new Array(numPages), (_, index) => {
+                                    const pageNum = index + 1;
+                                    const isVisible = visiblePages.has(pageNum);
+                                    const currentZoom = isVisible ? zoomLevel : 1; // Only zoom visible pages
+                                    
+                                    return (
+                                        <div key={pageNum} className="mb-4 flex justify-center">
+                                            <Page 
+                                                pageNumber={pageNum} 
+                                                width={typeof window !== 'undefined' ? window.innerWidth * 0.66 * 0.9 * currentZoom : 600 * currentZoom}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </Document>
+                        </div>
                 </div>
                 {/* Pagination overlay - floating pill */}
                 {numPages && (