fix(beszel): system grid widget respects board opacity and radius

The inner Card components used Mantine's default opaque background and
hard-coded radius, clashing with board styling. Now uses board.opacity
and board.itemRadius with the same pattern as system-resources widgets.

Closes #5968

packages/widgets/src/beszel-system-grid/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge, Box, Card, Group, Progress, Text, Stack } from "@mantine/core";
+import { Badge, Box, Card, Group, Progress, Text, Stack, useComputedColorScheme } from "@mantine/core";
 import {
   Activity,
   Battery,
@@ -16,6 +16,7 @@ import {
 } from "lucide-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
@@ -151,6 +152,8 @@ interface SystemCardProps {
   t: ReturnType<typeof useScopedI18n<"widget.beszelSystemGrid">>;
   size: SizeConfig;
   maxMetrics: number;
+  backgroundColor: string;
+  itemRadius: string;
 }
 
 const metricRenderers = [
@@ -307,19 +310,20 @@ const metricRenderers = [
   },
 ] as const;
 
-const SystemCard = ({ system, options, t, size, maxMetrics }: SystemCardProps) => {
+const SystemCard = ({ system, options, t, size, maxMetrics, backgroundColor, itemRadius }: SystemCardProps) => {
   const visibleMetrics = metricRenderers.filter((m) => m.visible(system, options)).slice(0, maxMetrics);
 
   return (
     <Card
       padding={size.cardPadding}
-      radius="sm"
-      withBorder
+      radius={itemRadius}
+      bg={backgroundColor}
       h="100%"
       style={{
         overflow: "hidden",
         display: "flex",
         flexDirection: "column" as const,
+        border: "0.0625rem solid var(--border-color)",
       }}
     >
       <Group gap="xs" mb={2}>
@@ -348,6 +352,11 @@ export default function BeszelSystemGridWidget({
   height,
 }: WidgetComponentProps<"beszelSystemGrid">) {
   const t = useScopedI18n("widget.beszelSystemGrid");
+  const board = useRequiredBoard();
+  const colorScheme = useComputedColorScheme("light");
+  const opacity = board.opacity / 100;
+  const backgroundColor = colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
+
   const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery(
     { integrationIds },
     { staleTime: 5_000, refetchInterval: 5_000, retry: false },
@@ -378,7 +387,16 @@ export default function BeszelSystemGridWidget({
       }}
     >
       {filteredSystems.map((system) => (
-        <SystemCard key={system._key} system={system} options={options} t={t} size={size} maxMetrics={maxMetrics} />
+        <SystemCard
+          key={system._key}
+          system={system}
+          options={options}
+          t={t}
+          size={size}
+          maxMetrics={maxMetrics}
+          backgroundColor={backgroundColor}
+          itemRadius={board.itemRadius}
+        />
       ))}
     </Box>
   );