From ed1ef56184b0bef2264196dbe938ccdb25227c3f Mon Sep 17 00:00:00 2001
From: Iven Schlenther <i.schlenther@muensmedia.de>
Date: Wed, 22 Jul 2026 11:27:38 +0200
Subject: [PATCH] - 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       | 1 +
 .../Pages/Infrastructure/Details/Components/Gauges.tsx    | 5 ++++-
 client/src/locales/de.json                                | 8 ++++----
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/Components/design-elements/BaseChart.tsx b/client/src/Components/design-elements/BaseChart.tsx
index c6d8298a7..ddfd82a3e 100644
--- a/client/src/Components/design-elements/BaseChart.tsx
+++ b/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>
diff --git a/client/src/Pages/Infrastructure/Details/Components/Gauges.tsx b/client/src/Pages/Infrastructure/Details/Components/Gauges.tsx
index 04c87ca95..e2b053aef 100644
--- a/client/src/Pages/Infrastructure/Details/Components/Gauges.tsx
+++ b/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)}
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index e042f9d55..29930bdfc 100644
--- a/client/src/locales/de.json
+++ b/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",