more pdfjs

frontend/src/preview/DocumentViewerLayout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import type { JSX } from 'react';
 import DocumentInfoPanel from '../documents/DocumentInfoPanel';
 import { DownloadIcon } from '../ui/icons';
@@ -62,6 +62,7 @@ const DocumentViewerLayout = ({
   layoutMode = 'split',
 }: DocumentViewerLayoutProps): JSX.Element => {
   const isStacked = layoutMode === 'stacked';
+  const viewportRef = useRef<HTMLDivElement>(null);
 
   const previewContent = useMemo(() => {
     if (!document || !previewEntry?.url) {
@@ -95,6 +96,7 @@ const DocumentViewerLayout = ({
         <PdfViewer
           src={previewEntry.url}
           title={documentTitle ? `Preview of ${documentTitle}` : undefined}
+          viewportRef={viewportRef}
         />
       );
     }
@@ -123,17 +125,17 @@ const DocumentViewerLayout = ({
         </a>
       </div>
     );
-  }, [previewEntry, document]);
+  }, [document, previewEntry, viewportRef]);
 
   const renderViewportPane = useCallback(() => (
-    <div className="document-viewer__viewport">
+    <div className="document-viewer__viewport" ref={viewportRef}>
       {!previewEntry?.url ? (
         <div className="document-viewer__message">{previewLoadingMessage}</div>
       ) : (
         previewContent
       )}
     </div>
-  ), [previewEntry?.url, previewLoadingMessage, previewContent]);
+  ), [previewContent, previewEntry?.url, previewLoadingMessage, viewportRef]);
 
   const viewportPane = renderViewportPane();