Add bold headline and zoom in pdf viewer

project/frontend/src/components/pdfViewer.tsx

@@ -12,6 +12,8 @@ import type {
 import { socket } from "../socket";
 import { API_HOST } from "../util/api";
 import { highlightPattern } from "../util/highlighting";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
 
 interface PDFViewerProps {
 	pitchBookId: string;
@@ -30,7 +32,7 @@ export default function PDFViewer({
 }: PDFViewerProps) {
 	const [numPages, setNumPages] = useState<number | null>(null);
 	const [pageNumber, setPageNumber] = useState(currentPage || 1);
-	const [containerWidth, setContainerWidth] = useState<number | null>(null);
+	const [baseWidth, setBaseWidth] = useState<number | null>(null);
 	const [pdfKey, setPdfKey] = useState(Date.now());
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [posHighlight, setPosHighlight] = useState<string[]>([]);
@@ -38,6 +40,7 @@ export default function PDFViewer({
 	const [textContent, setTextContent] = useState<
 		{ posKey: string; text: string; i: number }[]
 	>([]);
+	const [zoomLevel, setZoomLevel] = useState(1.0);
 
 	const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
 		setNumPages(numPages);
@@ -46,7 +49,9 @@ export default function PDFViewer({
 	useEffect(() => {
 		const updateWidth = () => {
 			if (containerRef.current) {
-				setContainerWidth(containerRef.current.offsetWidth);
+				if (!baseWidth) {
+					setBaseWidth(containerRef.current.offsetWidth);
+				}
 			}
 		};
 
@@ -186,16 +191,32 @@ export default function PDFViewer({
 			justifyContent="center"
 			alignItems="center"
 			width="100%"
+			maxWidth="900px"
+			margin="0 auto"
+			minHeight="80vh"
 			height="auto"
+			sx={{
+				backgroundColor: "#f5f5f5",
+				borderRadius: 2,
+				boxShadow: 2,
+			}}
 		>
 			<Box
 				ref={containerRef}
+				width="100%"
+				maxWidth="900px"
+				height="1000px"
 				sx={{
-					width: "100%",
+					backgroundColor: "transparent",
-					height: "auto",
+					border: "none",
+					borderRadius: 0,
+					boxShadow: "none",
+					overflow: "auto",
 					display: "flex",
 					justifyContent: "center",
 					alignItems: "center",
+					marginTop: 2,
+					marginBottom: 2,
 				}}
 			>
 				<Document
@@ -207,10 +228,10 @@ export default function PDFViewer({
 					}
 					onSourceError={(error) => console.error("Ungültige PDF:", error)}
 				>
-					{containerWidth && (
+					{baseWidth && (
 						<Page
 							pageNumber={pageNumber}
-							width={containerWidth * 0.98}
+							width={baseWidth * 0.98 * zoomLevel}
 							customTextRenderer={textRenderer}
 							onGetTextSuccess={onGetTextSuccess}
 						/>
@@ -225,6 +246,13 @@ export default function PDFViewer({
 				gap={1}
 				p={1}
 			>
+				<IconButton
+					disabled={zoomLevel <= 0.3}
+					onClick={() => setZoomLevel(z => Math.max(0.3, z - 0.1))}
+					title="Verkleinern"
+				>
+					<ZoomOutIcon fontSize="large" />
+				</IconButton>
 				<IconButton
 					disabled={pageNumber <= 1}
 					onClick={() => handlePageChange(pageNumber - 1)}
@@ -240,6 +268,12 @@ export default function PDFViewer({
 				>
 					<ArrowCircleRightIcon fontSize="large" />
 				</IconButton>
+				<IconButton
+					onClick={() => setZoomLevel(z => Math.min(3, z + 0.1))}
+					title="Vergrößern"
+				>
+					<ZoomInIcon fontSize="large" />
+				</IconButton>
 			</Box>
 		</Box>
 	);

project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx

@@ -256,8 +256,8 @@ function ExtractedResultsPage() {
 				<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
 					<ArrowBackIcon fontSize="large" sx={{ color: "#383838" }} />
 				</IconButton>
-				<Typography variant="h5" fontWeight="bold">
+				<Typography variant="h5">
-					Überprüfung der Kennzahl: {kpi}
+					Überprüfung der Kennzahl: <b><u>{kpi}</u></b>
 				</Typography>
 			</Box>