From 1ee519bb7aae496f5c6f0ee3a98a692848f2ce76 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Mon, 17 Aug 2026 15:14:29 +1000
Subject: [PATCH] fix(beszel): stop small text from vanishing under board zoom
 (#6616)

---
 packages/widgets/src/beszel-alerts/component.tsx   | 14 +++++++-------
 .../widgets/src/beszel-system-grid/component.tsx   |  6 +++---
 packages/widgets/src/beszel/_shared/chart.tsx      |  2 +-
 packages/widgets/src/beszel/_shared/disk-usage.tsx |  2 +-
 packages/widgets/src/beszel/_shared/tooltip.tsx    |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 8990767f3..042d5549c 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -135,7 +135,7 @@ export default function BeszelAlertsWidget({
           {alerts.length === 0 && (
             <Stack align="center" justify="center" py="xl" gap="xs">
               <ThemeIcon variant="light" color="gray" size="lg" radius="xl">
-                <IconBellOff size={18} />
+                <IconBellOff size="var(--mantine-font-size-lg)" />
               </ThemeIcon>
               <Text size="sm" c="dimmed">
                 {t("empty")}
@@ -146,7 +146,7 @@ export default function BeszelAlertsWidget({
           {triggeredAlerts.length > 0 && (
             <Stack gap={6}>
               <Group gap={6}>
-                <IconFlame size={14} color="var(--mantine-color-red-6)" />
+                <IconFlame size="var(--mantine-font-size-sm)" color="var(--mantine-color-red-6)" />
                 <Text size="xs" fw={600} c="red">
                   {t("status.triggered")} ({triggeredAlerts.length})
                 </Text>
@@ -171,7 +171,7 @@ export default function BeszelAlertsWidget({
           {showOkAlerts && okAlerts.length > 0 && (
             <Stack gap={6}>
               <Group gap={6}>
-                <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
+                <IconCircleCheck size="var(--mantine-font-size-sm)" color="var(--mantine-color-green-6)" />
                 <Text size="xs" fw={600} c="dimmed">
                   {t("status.ok")} ({okAlerts.length})
                 </Text>
@@ -196,7 +196,7 @@ export default function BeszelAlertsWidget({
               <Divider />
               <Stack gap={6}>
                 <Group gap={6}>
-                  <IconHistory size={14} opacity={0.5} />
+                  <IconHistory size="var(--mantine-font-size-sm)" opacity={0.5} />
                   <Text size="xs" fw={600} c="dimmed">
                     {t("history")}
                   </Text>
@@ -215,7 +215,7 @@ export default function BeszelAlertsWidget({
                           style={{ borderRadius: 2, flexShrink: 0 }}
                           bg={isResolved ? "green.6" : "red.6"}
                         />
-                        <HistoryIcon size={12} opacity={0.5} style={{ flexShrink: 0 }} />
+                        <HistoryIcon size="var(--mantine-font-size-xs)" opacity={0.5} style={{ flexShrink: 0 }} />
                         <Stack gap={0} style={{ minWidth: 0 }}>
                           <Text size="xs" fw={500} truncate>
                             {entry.name}
@@ -229,7 +229,7 @@ export default function BeszelAlertsWidget({
                         <Badge size="xs" variant="dot" color={isResolved ? "green" : "red"}>
                           {isResolved ? t("resolved") : t("status.triggered")}
                         </Badge>
-                        <Text size="10px" c="dimmed">
+                        <Text size="xs" c="dimmed">
                           {dayjs(entry.created).fromNow()}
                         </Text>
                       </Stack>
@@ -292,7 +292,7 @@ function AlertRow({ name, value, min, systemName, integrationName, triggered, sh
           backgroundColor: triggered ? "var(--mantine-color-red-light)" : "var(--mantine-color-default-hover)",
         }}
       >
-        <Icon size={14} opacity={0.7} style={{ flexShrink: 0 }} />
+        <Icon size="var(--mantine-font-size-sm)" opacity={0.7} style={{ flexShrink: 0 }} />
         <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
           <Group gap={6} wrap="nowrap">
             <Text size="xs" fw={600} truncate>
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index c3d56cce7..d476371ce 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -59,7 +59,7 @@ interface SizeConfig {
 
 const defaultSizeConfig: SizeConfig = {
   iconSize: 10,
-  fontSize: "10px",
+  fontSize: "xs",
   progressSize: "xs",
   labelMiw: 40,
   valueMiw: 30,
@@ -418,7 +418,7 @@ const SystemCard = ({
         {visibleMetrics.map((m) => m.render(system, t, size))}
       </Stack>
       {hiddenMetricCount > 0 && (
-        <Text size="10px" c="dimmed" ta="right">
+        <Text size="xs" c="dimmed" ta="right">
           +{hiddenMetricCount}
         </Text>
       )}
@@ -428,7 +428,7 @@ const SystemCard = ({
 
 const SystemMetadata = ({ label, value }: { label: string; value: string }) => (
   <Box style={{ minWidth: 0 }}>
-    <Text size="10px" c="dimmed">
+    <Text size="xs" c="dimmed">
       {label}
     </Text>
     <Text size="xs" fw={500} truncate title={value}>
diff --git a/packages/widgets/src/beszel/_shared/chart.tsx b/packages/widgets/src/beszel/_shared/chart.tsx
index 0c32e9b2a..7a9949b6d 100644
--- a/packages/widgets/src/beszel/_shared/chart.tsx
+++ b/packages/widgets/src/beszel/_shared/chart.tsx
@@ -88,7 +88,7 @@ export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60
   });
 }
 
-const yAxisBase = { tickMargin: 0, tick: { fontSize: 10 } } as const;
+const yAxisBase = { tickMargin: 0, tick: { fontSize: "var(--mantine-font-size-xs)" } } as const;
 const chartStyle = { minWidth: 0, minHeight: 1 } as const;
 const panelStyle = { minWidth: 0, overflow: "hidden" } as const;
 export const CPU_Y_AXIS_DOMAIN: [number, string] = [0, "auto"];
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx
index ce7ec95f8..3678c20ed 100644
--- a/packages/widgets/src/beszel/_shared/disk-usage.tsx
+++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx
@@ -94,7 +94,7 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
             <Stack gap={6} miw={145}>
               {[["/", system.disk] as const, ...filesystems].map(([path, value]) => (
                 <Stack key={path} gap={1}>
-                  <Text size="10px" c="dimmed" fw={500} lh={1.2}>
+                  <Text size="xs" c="dimmed" fw={500} lh={1.2}>
                     {mountLabel(path)}
                   </Text>
                   <Group gap={8} wrap="nowrap">
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index a7020b2dc..8211550fd 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -11,7 +11,7 @@ const styles: Record<string, CSSProperties> = {
     border: "1px solid var(--mantine-color-dark-4)",
     borderRadius: 6,
     padding: "6px 10px",
-    fontSize: 12,
+    fontSize: "var(--mantine-font-size-xs)",
     lineHeight: 1.5,
     pointerEvents: "none",
     overflowX: "hidden",