From 7eeca5c3ba07e0d1f0044e3328eb94218665ccf9 Mon Sep 17 00:00:00 2001
From: s8613 <s86136@bht-berlin.de>
Date: Tue, 1 Jul 2025 10:52:56 +0200
Subject: [PATCH] Fixed extra frame font and small styling issues.

---
 project/frontend/src/components/KPIForm.tsx   | 81 +++++++++++--------
 project/frontend/src/components/pdfViewer.tsx | 18 ++---
 2 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/project/frontend/src/components/KPIForm.tsx b/project/frontend/src/components/KPIForm.tsx
index f58d88d..13152cc 100644
--- a/project/frontend/src/components/KPIForm.tsx
+++ b/project/frontend/src/components/KPIForm.tsx
@@ -7,6 +7,7 @@ import type { Kennzahl } from "../types/kpi";
 import { typeDisplayMapping } from "../types/kpi";
 import Snackbar from "@mui/material/Snackbar";
 import MuiAlert from "@mui/material/Alert";
+import { API_HOST } from "../util/api";
 
 
 interface KPIFormProps {
@@ -92,7 +93,7 @@ export function KPIForm({ mode, initialData, onSave, onCancel, loading = false,
                 localStorage.setItem("spacyData", JSON.stringify(updated));
 
                 // POST Request an das Flask-Backend
-                const response = await fetch("http://localhost:5050/api/spacy/append-training-entry", {
+                const response = await fetch(`${API_HOST}/api/spacy/append-training-entry/`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json"
@@ -240,42 +241,54 @@ export function KPIForm({ mode, initialData, onSave, onCancel, loading = false,
                     </FormControl>
                 </Box>
 
+                <Divider sx={{ my: 3 }} />
 
-                {mode === 'add' && (
-                    <>
-                        <Divider sx={{ my: 3 }} />
-                        <Box mb={4}>
-                            <FormControlLabel
-                                control={
-                                    <Checkbox
-                                        checked={formData.active !== false}
-                                        onChange={(e) => updateField('active', e.target.checked)}
-                                        sx={{ color: '#383838' }}
-                                    />
-                                }
-                                label="Aktiv"
+                <Box mb={4}>
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={formData.active !== false}
+                                onChange={(e) => updateField('active', e.target.checked)}
+                                sx={{
+                                    color: '#666666',
+                                    '&.Mui-checked': {
+                                        color: '#333333',
+                                    },
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(102, 102, 102, 0.04)',
+                                    }
+                                }}
                             />
-                            <Typography variant="body2" color="text.secondary" ml={4}>
-                                Die Kennzahl ist aktiv und wird angezeigt
-                            </Typography>
-                        </Box>
-                        <Box mt={3}>
-                            <FormControlLabel
-                                control={
-                                    <Checkbox
-                                        checked={formData.mandatory || false}
-                                        onChange={(e) => updateField('mandatory', e.target.checked)}
-                                        sx={{ color: '#383838' }}
-                                    />
-                                }
-                                label="Erforderlich"
+                        }
+                        label="Aktiv"
+                    />
+                    <Typography variant="body2" color="text.secondary" ml={4}>
+                        Die Kennzahl ist aktiv und wird angezeigt
+                    </Typography>
+                </Box>
+                <Box mt={3}>
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={formData.mandatory || false}
+                                onChange={(e) => updateField('mandatory', e.target.checked)}
+                                sx={{
+                                    color: '#666666',
+                                    '&.Mui-checked': {
+                                        color: '#333333',
+                                    },
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(102, 102, 102, 0.04)',
+                                    }
+                                }}
                             />
-                            <Typography variant="body2" color="text.secondary" ml={4}>
-                                Die Kennzahl erlaubt keine leeren Werte
-                            </Typography>
-                        </Box>
-                    </>
-                )}
+                        }
+                        label="Erforderlich"
+                    />
+                    <Typography variant="body2" color="text.secondary" ml={4}>
+                        Die Kennzahl erlaubt keine leeren Werte
+                    </Typography>
+                </Box>
 
                 <Divider sx={{ my: 3 }} />
 
diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx
index b41a433..b88a723 100644
--- a/project/frontend/src/components/pdfViewer.tsx
+++ b/project/frontend/src/components/pdfViewer.tsx
@@ -188,6 +188,10 @@ export default function PDFViewer({
 		);
 	}, []);
 
+	const contentWidth = baseWidth ? baseWidth * 0.98 * zoomLevel : 0;
+	const containerWidth = baseWidth ? baseWidth : 0;
+	const willOverflow = contentWidth > containerWidth;
+
 	return (
 		<Box
 			display="flex"
@@ -197,11 +201,6 @@ export default function PDFViewer({
 			width="100%"
 			maxWidth="850px"
 			margin="0 auto"
-			sx={{
-				backgroundColor: "#f5f5f5",
-				borderRadius: 2,
-				boxShadow: 2,
-			}}
 		>
 			<Box
 				ref={containerRef}
@@ -213,11 +212,10 @@ export default function PDFViewer({
 					borderRadius: 0,
 					boxShadow: "none",
 					overflow: "auto",
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-					marginTop: 2,
-					marginBottom: 2,
+					display: willOverflow ? "block" : "flex",
+					justifyContent: willOverflow ? "flex-start" : "center",
+					alignItems: willOverflow ? "flex-start" : "center",
+					padding: willOverflow ? `${Math.max(0, (500 - (contentWidth * (500 / containerWidth))) / 2)}px ${Math.max(0, (containerWidth - contentWidth) / 2)}px` : 0,
 				}}
 			>
 				<Document