From 73bed51df895250f415efd7a87e721e403b3fd99 Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 26 Jun 2026 20:27:25 +0200 Subject: [PATCH] fix(widgets): make downloads widget table background transparent (#6025) The MantineReactTable defaults table cell backgrounds to var(--mantine-color-body) which is opaque. This makes the downloads widget table block appear solid while the footer and other widgets correctly show the board's background. Added a styles.css targeting table elements to force background-color: transparent, following the same pattern used by the beszel-system-table widget. Also added bg=transparent to mantinePaperProps for the Paper wrapper. --- packages/widgets/src/downloads/component.tsx | 3 ++- packages/widgets/src/downloads/styles.css | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 packages/widgets/src/downloads/styles.css diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx index 60e970c22..c74723d86 100644 --- a/packages/widgets/src/downloads/component.tsx +++ b/packages/widgets/src/downloads/component.tsx @@ -1,6 +1,7 @@ "use client"; import "../widgets-common.css"; +import "./styles.css"; import { useCallback, useMemo, useState } from "react"; import type { MantineStyleProp } from "@mantine/core"; @@ -577,7 +578,7 @@ export default function DownloadClientsWidget({ enableColumnOrdering: isEditMode, enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 5 }, - mantinePaperProps: { flex: 1, withBorder: false, shadow: undefined }, + mantinePaperProps: { flex: 1, withBorder: false, shadow: undefined, bg: "transparent" }, mantineTableContainerProps: { style: { height: "100%" } }, mantineTableProps: { className: "downloads-widget-table", diff --git a/packages/widgets/src/downloads/styles.css b/packages/widgets/src/downloads/styles.css new file mode 100644 index 000000000..ae9bee8c1 --- /dev/null +++ b/packages/widgets/src/downloads/styles.css @@ -0,0 +1,12 @@ +/* Make the MantineReactTable transparent so the board card's opacity-controlled + background shows through. MRT defaults to var(--mantine-color-body) which is opaque. */ +.downloads-widget-table, +.downloads-widget-table .mantine-Table-table, +.downloads-widget-table .mantine-Table-thead, +.downloads-widget-table .mantine-Table-tbody, +.downloads-widget-table .mantine-Table-tfoot, +.downloads-widget-table .mantine-Table-tr, +.downloads-widget-table th, +.downloads-widget-table td { + background-color: transparent !important; +}