improved scaling and fix grey void

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "@embedpdf/plugin-render": "^1.1.1",
         "@embedpdf/plugin-scroll": "^1.1.1",
         "@embedpdf/plugin-selection": "^1.1.1",
+        "@embedpdf/plugin-tiling": "^1.1.1",
         "@embedpdf/plugin-viewport": "^1.1.1",
         "@embedpdf/plugin-zoom": "^1.1.1",
         "@emotion/react": "^11.14.0",
@@ -726,6 +727,24 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/@embedpdf/plugin-tiling": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.1.1.tgz",
+      "integrity": "sha512-KxpouPRsDZ1rnxsxnusywlI92L0l9+WilMAa+RzLDDuesOrtDWL2ry/MAhT0A/lhZP6NdPZNjlqqZGBWcFZhHA==",
+      "dependencies": {
+        "@embedpdf/models": "1.1.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.1.1",
+        "@embedpdf/plugin-render": "1.1.1",
+        "@embedpdf/plugin-scroll": "1.1.1",
+        "@embedpdf/plugin-viewport": "1.1.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@embedpdf/plugin-viewport": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.1.1.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "@embedpdf/plugin-render": "^1.1.1",
     "@embedpdf/plugin-scroll": "^1.1.1",
     "@embedpdf/plugin-selection": "^1.1.1",
+    "@embedpdf/plugin-tiling": "^1.1.1",
     "@embedpdf/plugin-viewport": "^1.1.1",
     "@embedpdf/plugin-zoom": "^1.1.1",
     "@emotion/react": "^11.14.0",

frontend/src/components/viewer/EmbedPdfViewer.tsx

@@ -57,7 +57,14 @@ const EmbedPdfViewer = ({
   }, [previewFile, fileWithUrl]);
 
   return (
-    <Box style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <Box style={{ 
+      position: 'relative', 
+      height: '100%', 
+      display: 'flex', 
+      flexDirection: 'column',
+      overflow: 'hidden',
+      contain: 'layout style paint'
+    }}>
       {/* Close Button - Only show in preview mode */}
       {onClose && previewFile && (
         <ActionIcon
@@ -87,7 +94,15 @@ const EmbedPdfViewer = ({
           )}
 
           {/* EmbedPDF Viewer with Toolbar Overlay */}
-          <Box style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
+          <Box style={{ 
+            position: 'relative', 
+            flex: 1, 
+            overflow: 'hidden',
+            minHeight: 0,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column'
+          }}>
             <LocalEmbedPDF
               file={effectiveFile.file}
               url={effectiveFile.url}

frontend/src/components/viewer/LocalEmbedPDF.tsx

@@ -11,6 +11,7 @@ import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react'
 import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
 import { InteractionManagerPluginPackage, PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
 import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
+import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
 import { ZoomControlsExporter } from './ZoomControlsExporter';
 import { ScrollControlsExporter } from './ScrollControlsExporter';
 import { SelectionControlsExporter } from './SelectionControlsExporter';
@@ -71,7 +72,14 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
       createPluginRegistration(ZoomPluginPackage, {
         defaultZoomLevel: ZoomMode.FitPage,
         minZoom: 0.2,
-        maxZoom: 5.0,
+        maxZoom: 3.0,
+      }),
+      
+      // Register tiling plugin (depends on Render, Scroll, Viewport)
+      createPluginRegistration(TilingPluginPackage, {
+        tileSize: 768,
+        overlapPx: 5,
+        extraRings: 1,
       }),
     ];
   }, [pdfUrl]);
@@ -137,7 +145,15 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
 
   // Wrap your UI with the <EmbedPDF> provider
   return (
-    <div style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
+    <div style={{ 
+      height: '100%', 
+      width: '100%', 
+      position: 'relative', 
+      overflow: 'hidden',
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0
+    }}>
       <EmbedPDF engine={engine} plugins={plugins}>
         <ZoomControlsExporter />
         <ScrollControlsExporter />
@@ -147,13 +163,26 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
             backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5',
             height: '100%',
             width: '100%',
+            maxHeight: '100%',
+            maxWidth: '100%',
             overflow: 'auto',
+            position: 'relative',
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            contain: 'strict',
           }}
         >
           <Scroller
             renderPage={({ width, height, pageIndex, scale, rotation }: { width: number; height: number; pageIndex: number; scale: number; rotation?: number }) => (
-              <PagePointerProvider width={width} height={height} pageIndex={pageIndex} scale={scale} rotation={rotation}>
+              <PagePointerProvider {...{ width, height, pageIndex, scale, rotation: rotation || 0 }}>
-                <RenderLayer pageIndex={pageIndex} scale={scale} />
+                {/* 1. Low-resolution base layer for immediate feedback */}
+                <RenderLayer pageIndex={pageIndex} scale={0.5} />
+                
+                {/* 2. High-resolution tile layer on top */}
+                <TilingLayer pageIndex={pageIndex} scale={scale} />
+                
+                {/* 3. Selection layer for text interaction */}
                 <SelectionLayer pageIndex={pageIndex} scale={scale} />
               </PagePointerProvider>
             )}