From ac62e5bfd6731651b75345b8bb6a07882fad8daa Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Tue, 1 Sep 2026 16:50:00 +1000
Subject: [PATCH] fix(system-resources): divide chart rows evenly via CSS, no
 board-zoom pixel math (#6756)

Each visible chart row was hardcoded to a fixed pixel height (110px in
advanced mode, 56px-capped in compact) regardless of the widget's actual
tile size - resizing the tile taller left the extra height unused, and
some visible charts required scrolling to reach.

Divide the available height evenly across rows using CSS Grid's
grid-auto-rows: 1fr (the Stack fills the tile via a definite pixel
height, the SimpleGrid grows into it via flex and divides its rows
evenly) rather than computing a per-chart pixel height in JS. Confirmed
via live inspection of a deployed board that Mantine's h prop is not
safe for this: its rem() converter strips a "px" suffix from any string
before checking whether it's a parseable number, so even a literal pixel
*string* passed through h= gets rescaled by rem() * var(--mantine-scale)
exactly like a raw number would - style.height is the only way to set
an exact, un-rescaled pixel value.
---
 .../src/system-resources/component.tsx        | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index e91bc2978..b101e906a 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -236,23 +236,26 @@ const SystemCharts = ({
   const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
   const chartCount = visibleCharts.length;
   const chartColumns = useMemo(() => (isAdvanced ? getAdvancedChartColumns(width) : 1), [isAdvanced, width]);
-  const compactChartGap = 8;
-  const compactRowHeight = 56;
-  const chartHeight = isAdvanced
-    ? 110
-    : Math.max(
-        28,
-        Math.min(compactRowHeight, (height - Math.max(0, chartCount - 1) * compactChartGap) / Math.max(1, chartCount)),
-      );
+  const chartGap = isAdvanced ? "xs" : 8;
 
   return (
-    <Stack gap={isAdvanced ? "xs" : compactChartGap} h="auto" miw={0}>
+    // style={{height}}, not h={height} or h={`${height}px`} - Mantine's h prop runs numbers
+    // (and even pixel *strings*, since its rem() converter strips a "px" suffix before checking
+    // whether the remainder is a parseable number) through rem() * var(--mantine-scale), which
+    // silently rescales the value again on top of the board's own zoom. Only calc()/percentage/
+    // non-numeric strings skip that path (why h="100%" below is safe) - a literal style.height
+    // is the only way to set an exact pixel value that isn't run through it.
+    <Stack gap={chartGap} style={{ height: `${height}px` }} miw={0}>
       {showTitle && (
         <Text size="sm" fw={600} truncate="end">
           {integrationName}
         </Text>
       )}
-      <SimpleGrid cols={chartColumns} spacing={isAdvanced ? "xs" : compactChartGap}>
+      {/* Divide the available height evenly across however many rows chartColumns wraps the
+          charts into via CSS grid-auto-rows: 1fr, rather than computing a per-chart pixel height
+          in JS - keeps every chart's own sizing untouched (still h="100%" of its grid cell) and
+          needs no board-zoom-aware math of its own. */}
+      <SimpleGrid cols={chartColumns} spacing={chartGap} style={{ flex: 1, minHeight: 0, gridAutoRows: "1fr" }}>
         {chartCount === 0 && (
           <Center h="100%">
             <Text size="sm" c="dimmed">
@@ -261,7 +264,7 @@ const SystemCharts = ({
           </Center>
         )}
         {visibleCharts.includes("cpu") && (
-          <Box h={chartHeight}>
+          <Box h="100%">
             <SystemResourceCPUChart
               cpuUsageOverTime={items.map((item) => item.cpu)}
               hasShadow={options.hasShadow}
@@ -271,7 +274,7 @@ const SystemCharts = ({
           </Box>
         )}
         {visibleCharts.includes("memory") && (
-          <Box h={chartHeight}>
+          <Box h="100%">
             <SystemResourceMemoryChart
               memoryUsageOverTime={items.map((item) => item.memory)}
               totalCapacityInBytes={memoryCapacityInBytes}
@@ -282,7 +285,7 @@ const SystemCharts = ({
           </Box>
         )}
         {visibleCharts.includes("gpu") && (
-          <Box h={chartHeight}>
+          <Box h="100%">
             <SystemResourceGPUChart
               gpuUsageOverTime={items.map((item) => item.gpu)}
               hasShadow={options.hasShadow}
@@ -293,7 +296,7 @@ const SystemCharts = ({
         )}
         {showNetwork &&
           (width >= 300 ? (
-            <Group h={chartHeight} gap="xs" grow wrap="nowrap">
+            <Group h="100%" gap="xs" grow wrap="nowrap">
               <NetworkTrafficChart
                 usageOverTime={networkItems.map((network) => network.down)}
                 isUp={false}
@@ -310,7 +313,7 @@ const SystemCharts = ({
               />
             </Group>
           ) : (
-            <Box h={chartHeight}>
+            <Box h="100%">
               <CombinedNetworkTrafficChart
                 usageOverTime={networkItems}
                 hasShadow={options.hasShadow}