From 73de83b48f8e840b9670ca69e3e862e9bafba63e Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Thu, 27 Aug 2026 10:45:54 +1000
Subject: [PATCH] Address CodeRabbit review on system resources widget PR

- Render the chart tooltip via a portal so it isn't clipped by the
  card's overflow:hidden (needed to stop the chart line itself
  bleeding past its rounded corners).
- Move chartColumns' width breakpoints into a lookup table and
  memoize the computed value, instead of an inline ternary.
---
 .../src/system-resources/chart/common-chart.tsx    |  7 ++++++-
 .../widgets/src/system-resources/component.tsx     | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/widgets/src/system-resources/chart/common-chart.tsx b/packages/widgets/src/system-resources/chart/common-chart.tsx
index cc396f8e5..e839f4423 100644
--- a/packages/widgets/src/system-resources/chart/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -127,7 +127,12 @@ export const CommonChart = ({
             },
           }}
           tooltipAnimationDuration={200}
-          tooltipProps={tooltipProps}
+          tooltipProps={{
+            // Render via portal so the tooltip isn't clipped by the card's overflow:hidden
+            // (needed to stop the chart line itself bleeding past its rounded corners).
+            portal: typeof document !== "undefined" ? document.body : undefined,
+            ...tooltipProps,
+          }}
           withTooltip={height >= 64}
           yAxisProps={yAxisProps}
           fillOpacity={chartType === "area" ? 0.3 : undefined}
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index 6ef2f6419..f077659bd 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -19,6 +19,15 @@ const COMPACT_HISTORY_SIZE = 15;
 const ADVANCED_HISTORY_SIZE = 60;
 const ALL_SYSTEM_CHARTS = ["cpu", "memory", "gpu", "network"] as const;
 
+const ADVANCED_CHART_COLUMN_BREAKPOINTS = [
+  { minWidth: 1100, columns: 4 },
+  { minWidth: 560, columns: 2 },
+  { minWidth: 0, columns: 1 },
+] as const;
+
+const getAdvancedChartColumns = (width: number): number =>
+  ADVANCED_CHART_COLUMN_BREAKPOINTS.find(({ minWidth }) => width >= minWidth)?.columns ?? 1;
+
 type SystemChart = WidgetComponentProps<"systemResources">["options"]["visibleCharts"][number];
 
 type ChartItem = {
@@ -226,7 +235,10 @@ const SystemCharts = ({
   const showNetwork = visibleCharts.includes("network");
   const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
   const chartCount = visibleCharts.length;
-  const chartColumns = isAdvanced ? (width >= 1100 ? 4 : width >= 560 ? 2 : 1) : 1;
+  const chartColumns = useMemo(
+    () => (isAdvanced ? getAdvancedChartColumns(width) : 1),
+    [isAdvanced, width],
+  );
   const compactChartGap = 8;
   const compactRowHeight = 56;
   const chartHeight = isAdvanced