From c75d4f0f58136a0499a51494eb54c78c745f0b3f Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 30 Jan 2025 22:14:26 +0100
Subject: [PATCH] fix: negative curve radius system health (#2197)

---
 .../src/health-monitoring/system-health.tsx       | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 2660c71d8..585749f3b 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -318,14 +318,15 @@ export const matchFileSystemAndSmart = (fileSystems: FileSystem[], smartData: Sm
 
 const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
   const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
 
   return (
     <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu">
       <RingProgress
         className="health-monitoring-cpu-utilization"
         roundCaps
-        size={width * 0.95}
-        thickness={width / 10}
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
         label={
           <Center style={{ flexDirection: "column" }}>
             <Text
@@ -348,13 +349,14 @@ const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
 
 const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: number }) => {
   const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
   return (
     <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu-temperature">
       <RingProgress
         className="health-monitoring-cpu-temp"
         roundCaps
-        size={width * 0.95}
-        thickness={width / 10}
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
         label={
           <Center style={{ flexDirection: "column" }}>
             <Text className="health-monitoring-cpu-temp-value" size="3cqmin">
@@ -376,6 +378,7 @@ const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: nu
 
 const MemoryRing = ({ available, used }: { available: string; used: string }) => {
   const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
   const memoryUsage = formatMemoryUsage(available, used);
 
   return (
@@ -383,8 +386,8 @@ const MemoryRing = ({ available, used }: { available: string; used: string }) =>
       <RingProgress
         className="health-monitoring-memory-use"
         roundCaps
-        size={width * 0.95}
-        thickness={width / 10}
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
         label={
           <Center style={{ flexDirection: "column" }}>
             <Text className="health-monitoring-memory-value" size="3cqmin">