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; +}