fix: GPU Power Draw chart renders full-width instead of half-width (#2269)

internal/site/src/components/routes/system.tsx

@@ -11,7 +11,7 @@ import { RootDiskCharts, ExtraFsCharts } from "./system/charts/disk-charts"
 import { ZfsCharts } from "./system/charts/zfs-charts"
 import { BandwidthChart, ContainerNetworkChart } from "./system/charts/network-charts"
 import { TemperatureChart, FanChart, BatteryChart } from "./system/charts/sensor-charts"
-import { GpuPowerChart, GpuDetailCharts } from "./system/charts/gpu-charts"
+import { GpuPowerChart, GpuCharts } from "./system/charts/gpu-charts"
 import { LazyContainersTable, LazySmartTable, LazySystemdTable, LazyZfsTable } from "./system/lazy-tables"
 import { LoadAverageChart } from "./system/charts/load-average-chart"
 import { ContainerIcon, CpuIcon, HardDriveIcon, TerminalSquareIcon } from "lucide-react"
@@ -133,7 +133,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 				</div>
 
 				{hasGpuData && lastGpus && (
-					<GpuDetailCharts
+					<GpuCharts
 						chartData={chartData}
 						grid={grid}
 						dataEmpty={dataEmpty}
@@ -219,18 +219,15 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 
 				{hasGpu && (
 					<TabsContent value="gpu" forceMount className={activeTab === "gpu" ? "contents" : "hidden"}>
-						<div className="grid xl:grid-cols-2 gap-4">
+						<GpuCharts
-							{hasGpuPowerData && <GpuPowerChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} />}
-						</div>
-						{hasGpuData && lastGpus && (
-							<GpuDetailCharts
 							chartData={chartData}
 							grid={grid}
 							dataEmpty={dataEmpty}
-								lastGpus={lastGpus as Record<string, GPUData>}
+							lastGpus={(lastGpus ?? {}) as Record<string, GPUData>}
 							hasGpuEnginesData={hasGpuEnginesData}
-							/>
+						>
-						)}
+							{hasGpuPowerData && <GpuPowerChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} />}
+						</GpuCharts>
 					</TabsContent>
 				)}
 

internal/site/src/components/routes/system/charts/gpu-charts.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/core/macro"
-import { useRef, useMemo } from "react"
+import { Fragment, type ReactNode, useRef, useMemo } from "react"
 import AreaChartDefault, { type DataPoint } from "@/components/charts/area-chart"
 import LineChartDefault from "@/components/charts/line-chart"
 import { Unit } from "@/lib/enums"
@@ -79,6 +79,7 @@ export function GpuPowerChart({
 
 	return (
 		<ChartCard
+			className={cn(grid && "!col-span-1")}
 			empty={dataEmpty}
 			grid={grid}
 			title={t`GPU Power Draw`}
@@ -96,22 +97,26 @@ export function GpuPowerChart({
 	)
 }
 
-/** GPU detail grid (engines + per-GPU usage/VRAM) — rendered outside the main 2-col grid */
+/** All GPU charts (optional power-draw slot + engines + per-GPU usage/VRAM) in a single 2-col grid, so the
-export function GpuDetailCharts({
+ *  cards' odd:last-of-type parity rule flows across the whole tab and no row is left half-empty */
+export function GpuCharts({
 	chartData,
 	grid,
 	dataEmpty,
 	lastGpus,
 	hasGpuEnginesData,
+	children,
 }: {
 	chartData: ChartData
 	grid: boolean
 	dataEmpty: boolean
 	lastGpus: Record<string, GPUData>
 	hasGpuEnginesData: boolean
+	children?: ReactNode
 }) {
 	return (
 		<div className="grid xl:grid-cols-2 gap-4">
+			{children}
 			{hasGpuEnginesData && (
 				<ChartCard
 					legend={true}
@@ -126,9 +131,8 @@ export function GpuDetailCharts({
 			{Object.keys(lastGpus).map((id) => {
 				const gpu = lastGpus[id] as GPUData
 				return (
-					<div key={id} className="contents">
+					<Fragment key={id}>
 						<ChartCard
-							className={cn(grid && "!col-span-1")}
 							empty={dataEmpty}
 							grid={grid}
 							title={`${gpu.n} ${t`Usage`}`}
@@ -178,7 +182,7 @@ export function GpuDetailCharts({
 								/>
 							</ChartCard>
 						)}
-					</div>
+					</Fragment>
 				)
 			})}
 		</div>