Made PDF bit more responsive.

project/frontend/src/components/pdfViewer.tsx

@@ -1,5 +1,5 @@
 import { Document, Page, pdfjs } from "react-pdf";
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { Box, IconButton } from '@mui/material';
@@ -15,11 +15,26 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
 export default function PDFViewer() {
     const [numPages, setNumPages] = useState<number | null>(null);
     const [pageNumber, setPageNumber] = useState(1);
+    const [containerWidth, setContainerWidth] = useState<number | null>(null);
+
+    const containerRef = useRef<HTMLDivElement>(null);
 
     const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
         setNumPages(numPages);
     };
 
+    useEffect(() => {
+        const updateWidth = () => {
+            if (containerRef.current) {
+                setContainerWidth(containerRef.current.offsetWidth);
+            }
+        };
+
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return () => window.removeEventListener('resize', updateWidth);
+    }, []);
+
     return (
         <Box
             display="flex"
@@ -31,18 +46,23 @@ export default function PDFViewer() {
             p={2}
         >
             <Box
+                ref={containerRef}
                 sx={{
-                    height: '90%',
+                    width: '100%',
+                    maxHeight: '90vh',
                     overflow: 'auto',
                     display: 'flex',
                     justifyContent: 'center',
+                    alignItems: 'center',
                 }}
             >
                 <Document file={testPDF} onLoadSuccess={onDocumentLoadSuccess}>
-                    <Page
+                    {containerWidth && (
-                        pageNumber={pageNumber}
+                        <Page
-                        scale={0.9}
+                            pageNumber={pageNumber}
-                    />
+                            width={containerWidth * 0.8}
+                        />
+                    )}
                 </Document>
             </Box>
             <Box