From f99700c696b03ede5128dec52035b66d613529ac Mon Sep 17 00:00:00 2001
From: s8613 <s86136@bht-berlin.de>
Date: Thu, 29 May 2025 09:19:02 +0200
Subject: [PATCH] Made PDF bit more responsive.

---
 project/frontend/src/components/pdfViewer.tsx | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx
index f90af0b..5e0ad8d 100644
--- a/project/frontend/src/components/pdfViewer.tsx
+++ b/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
-                        pageNumber={pageNumber}
-                        scale={0.9}
-                    />
+                    {containerWidth && (
+                        <Page
+                            pageNumber={pageNumber}
+                            width={containerWidth * 0.8}
+                        />
+                    )}
                 </Document>
             </Box>
             <Box