implement stable version of zooming

frontend/src/components/DocumentViewer.jsx

@@ -71,6 +71,18 @@ const DocumentViewer = ({ selectedFile, documentData, onPageChange, preloadedHig
         scrollToChunk(0);
     };
 
+    const zoomIn = () => {
+        if (zoom < 4) {
+            setZoom(prev => prev + 0.1);
+        }
+    };
+
+    const zoomOut = () => {
+        if (zoom > 0.2) {
+            setZoom(prev => prev - 0.1);
+        }
+    };
+
     // Call onDocumentReady only once when utils become available
     const callOnDocumentReady = () => {
         if (onDocumentReady && !documentReadyCalledRef.current && highlighterUtilsRef.current) {
@@ -185,7 +197,30 @@ const DocumentViewer = ({ selectedFile, documentData, onPageChange, preloadedHig
     }
     return (
         <div className="bg-white rounded-lg shadow-sm flex flex-col relative" style={{ width: '100%', height: '100%' }}>
-            <h2>{documentData?.filename || 'Document'}</h2>
+            <div className="flex justify-between items-center p-2 border-b">
+                <h2>{documentData?.filename || 'Document'}</h2>
+                <div className="flex items-center gap-2">
+                    <button 
+                        title="Zoom out" 
+                        onClick={zoomOut}
+                        className="px-2 py-1 border rounded hover:bg-gray-100"
+                        disabled={zoom <= 0.2}
+                    >
+                        -
+                    </button>
+                    <span className="text-sm text-gray-600 min-w-12 text-center">
+                        {(zoom * 100).toFixed(0)}%
+                    </span>
+                    <button 
+                        title="Zoom in" 
+                        onClick={zoomIn}
+                        className="px-2 py-1 border rounded hover:bg-gray-100"
+                        disabled={zoom >= 4}
+                    >
+                        +
+                    </button>
+                </div>
+            </div>
             
             <div style={{ height: '500px' }}>
                 <PdfLoader document={pdfUrl} workerSrc='/pdf.worker.min.js'>
@@ -193,6 +228,7 @@ const DocumentViewer = ({ selectedFile, documentData, onPageChange, preloadedHig
                         <PdfHighlighter
                             enableAreaSelection={(event) => event.altKey}
                             pdfDocument={pdfDocument}
+                            pdfScaleValue={zoom}
                             utilsRef={(_pdfHighlighterUtils) => {
                                 highlighterUtilsRef.current = _pdfHighlighterUtils;
                                 callOnDocumentReady();