diff --git a/apps/docs/docs/widgets/beszel-system-grid/index.mdx b/apps/docs/docs/widgets/beszel-system-grid/index.mdx index 137d3d003..1748521e4 100644 --- a/apps/docs/docs/widgets/beszel-system-grid/index.mdx +++ b/apps/docs/docs/widgets/beszel-system-grid/index.mdx @@ -16,7 +16,7 @@ import beszelSystemGrid from "./img/beszel-system-grid.png"; -This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Cards adapt their layout based on available space. If Beszel reports multiple filesystems, the disk bar exposes a hover breakdown for the root disk and each extra mount. +This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Resizing the widget adjusts its rows and columns to keep the cards balanced. If Beszel reports multiple filesystems, the disk bar exposes a hover breakdown for the root disk and each extra mount. Select a system card to open the complete statistics view, including system, filesystem, Docker, historical, and realtime charts. diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx index d476371ce..e1bdaee80 100644 --- a/packages/widgets/src/beszel-system-grid/component.tsx +++ b/packages/widgets/src/beszel-system-grid/component.tsx @@ -123,19 +123,12 @@ const MIN_CELL_HEIGHT = 80; const ADVANCED_MIN_CELL_WIDTH = 320; const ADVANCED_MIN_CELL_HEIGHT = 420; -const getColCount = (width: number, _height: number, itemCount: number, minCellWidth = MIN_CELL_WIDTH): number => { +const getColCount = (width: number, height: number, itemCount: number, minCellWidth = MIN_CELL_WIDTH): number => { if (itemCount <= 1) return 1; const maxCols = Math.min(itemCount, Math.max(1, Math.floor(width / minCellWidth))); - - let best = 1; - for (let c = 1; c <= maxCols; c++) { - const emptyCells = (c - (itemCount % c)) % c; - const bestEmpty = (best - (itemCount % best)) % best; - if (emptyCells < bestEmpty || (emptyCells === bestEmpty && c > best)) { - best = c; - } - } - return best; + const aspectRatio = width / Math.max(height, MIN_CELL_HEIGHT); + const idealCols = Math.round(Math.sqrt(itemCount * aspectRatio)); + return Math.min(maxCols, Math.max(1, idealCols)); }; interface MetricRowProps {