From 85c460190ceedad83c40af81d5efa270bc464b94 Mon Sep 17 00:00:00 2001
From: Sergio <yuheng9211@qq.com>
Date: Thu, 12 Mar 2026 12:15:11 -0700
Subject: [PATCH] fix(system-disks): format absolute denominator with
 human-readable size (#5183)

---
 packages/widgets/src/system-disks/component.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index eab43f768..ba2d49c25 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -4,6 +4,7 @@ import { Box, Card, Group, Stack, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
+import { humanFileSize } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
@@ -15,8 +16,13 @@ const getDisplayText = (item: { used: string; available: string; percentage: num
   switch (displayMode) {
     case "percentage":
       return `${Math.round(item.percentage)}%`;
-    case "absolute":
-      return `${item.used} / ${item.available}`;
+    case "absolute": {
+      const availableInBytes = Number(item.available);
+      const availableText = Number.isFinite(availableInBytes)
+        ? humanFileSize(Math.round(availableInBytes))
+        : item.available;
+      return `${item.used} / ${availableText}`;
+    }
     case "free":
       return `${Math.round(100 - item.percentage)}% free`;
     default: