- Add sx={{ overflowWrap: "anywhere" }} to Typography in BaseChart for improved text wrapping.

- Adjust `alignItems` to `stretch` and add `maxWidth` (260) to Gauge components in Infrastructure Details page.
- Update German translations for memory titles, temperatures, and labels in locales file.

client/src/Components/design-elements/BaseChart.tsx

@@ -40,6 +40,7 @@ export const BaseChart = ({
 				<Typography
 					variant="eyebrow"
 					color="text.secondary"
+					sx={{ overflowWrap: "anywhere" }}
 				>
 					{title}
 				</Typography>

client/src/Pages/Infrastructure/Details/Components/Gauges.tsx

@@ -25,10 +25,11 @@ export const InfraDetailsGauges = ({
 		<Stack
 			direction={isSmall ? "column" : "row"}
 			spacing={theme.spacing(8)}
-			alignItems={"center"}
+			alignItems={"stretch"}
 		>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.memory.title")}
+				maxWidth={260}
 				progress={(snapshot?.memory?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.memory.upperLabel")}
 				upperValue={prettyBytes(snapshot?.memory?.used_bytes || 0)}
@@ -37,6 +38,7 @@ export const InfraDetailsGauges = ({
 			/>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.cpu.title")}
+				maxWidth={260}
 				progress={(snapshot?.cpu?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.cpu.upperLabel")}
 				upperValue={getFrequency(snapshot?.cpu?.current_frequency || 0)}
@@ -49,6 +51,7 @@ export const InfraDetailsGauges = ({
 						key={disk?.device || 0 + idx}
 						// title={`Disk ${idx} usage`}
 						title={t("pages.infrastructure.gauges.disk.title", { idx })}
+						maxWidth={260}
 						progress={(disk.usage_percent || 0) * 100}
 						upperLabel={t("pages.infrastructure.gauges.disk.upperLabel")}
 						upperValue={prettyBytes(disk?.used_bytes || 0)}

client/src/locales/de.json

@@ -825,7 +825,7 @@
 					"netBytesRecv": "{{name}} - Empfangene Bytes",
 					"netBytesSent": "{{name}} - Gesendete Bytes",
 					"netNoTraffic": "Capture meldet null Datenverkehr auf allen Schnittstellen. Das ist normal, wenn Capture in einem Container läuft, der nur Loopback-Schnittstellen sieht — führe Capture direkt auf dem Host aus, um echten Netzwerkverkehr zu sehen.",
-					"temp": "Temp."
+					"temp": "Temperatur"
 				}
 			},
 			"gauges": {
@@ -841,13 +841,13 @@
 				},
 				"memory": {
 					"lowerLabel": "Frei",
-					"title": "Arbeitsspeicherauslastung",
+					"title": "Speicherauslastung",
 					"upperLabel": "Belegt"
 				}
 			},
 			"statBoxes": {
-				"avgCpuTemperature": "Durchschn. CPU Termperatur",
-				"cpuFrequency": "CPU Frequenz",
+				"avgCpuTemperature": "Durchschn. CPU-Temperatur",
+				"cpuFrequency": "CPU-Frequenz",
 				"cpuLogical": "CPU (logisch)",
 				"cpuPhysical": "CPU (physisch)",
 				"disk": "Festplatte",