fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

packages/widgets/src/umami/component.module.css

@@ -0,0 +1,21 @@
+.chartSurface {
+  min-width: 0;
+  min-height: 0;
+  background-color: transparent !important;
+}
+
+.chartSurface :global(.mantine-ScrollArea-viewport),
+.chartSurface :global(.mantine-ScrollArea-scrollbar),
+.chartSurface :global(.recharts-wrapper),
+.chartSurface :global(.recharts-surface) {
+  background-color: transparent !important;
+}
+
+.listSurface {
+  min-width: 0;
+  min-height: 0;
+  padding: 4px 6px;
+  border: 1px solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.32));
+  border-radius: var(--mantine-radius-sm);
+  background-color: transparent;
+}

packages/widgets/src/umami/umami-content.tsx

@@ -7,6 +7,7 @@ import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
 import type { UmamiVisitorStats } from "@homarr/integrations/types";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+import classes from "./component.module.css";
 
 import { UmamiEventsContent } from "./umami-events-content";
 import { getUmamiLayout } from "./umami-layout";
@@ -161,7 +162,7 @@ export function UmamiContent({
     );
 
   const advancedLists = (
-    <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="md" mih={260}>
+    <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="xs" mih={180}>
       {viewMode !== "topPages" && (
         <UmamiTopPagesContent
           integrationIds={integrationIds}
@@ -182,7 +183,7 @@ export function UmamiContent({
   );
 
   const advancedContent = stackAdvancedContent ? (
-    <ScrollArea h="100%">
+    <ScrollArea className={classes.chartSurface} h="100%">
       <Stack gap="md">
         <Box h={Math.max(280, Math.min(420, height - 160))}>{selectedView}</Box>
         {advancedLists}
@@ -190,15 +191,17 @@ export function UmamiContent({
     </ScrollArea>
   ) : (
     <SimpleGrid cols={2} spacing="md" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
-      <Box h="100%" mih={260}>
+      <Box className={classes.chartSurface} h="100%" mih={260}>
         {selectedView}
       </Box>
-      <ScrollArea h="100%">{advancedLists}</ScrollArea>
+      <ScrollArea className={classes.chartSurface} h="100%">
+        {advancedLists}
+      </ScrollArea>
     </SimpleGrid>
   );
 
   return (
-    <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%" pos="relative">
+    <Stack gap={isDense ? 1 : 4} p={isDense ? 2 : "xs"} h="100%" pos="relative">
       <Group justify="space-between" align="baseline" wrap="nowrap">
         <Text size="xs" c="dimmed" truncate="end" style={{ maxWidth: "55%" }}>
           {visitorStats.domain} ({formatTimeFrameLabel(timeFrame, t)})
@@ -264,7 +267,7 @@ export function UmamiContent({
           )}
         </Group>
       )}
-      <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
+      <Box className={classes.chartSurface} mt={4} style={{ flex: 1, minHeight: 0 }}>
         {displayMode === "advanced" ? advancedContent : selectedView}
       </Box>
       {(statsQuery.error || activeVisitorsQuery.error || multiEventQuery.error) && (

packages/widgets/src/umami/umami-top-list.tsx

@@ -5,6 +5,7 @@ import { Group, ScrollArea, Stack, Text } from "@mantine/core";
 import { clientApi } from "@homarr/api/client";
 import type { UmamiMetricItem } from "@homarr/integrations/types";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+import classes from "./component.module.css";
 
 import { umamiQueryOptions } from "./umami-utils";
 import { getUsableWidgetQueryData } from "../common/query-state";
@@ -52,7 +53,7 @@ function UmamiTopList({
   const locale = useCurrentIntlLocale();
 
   return (
-    <Stack gap={2} h="100%">
+    <Stack className={classes.listSurface} gap={2} h="100%">
       <Text size="xs" c="dimmed" fw={500}>
         {heading}
       </Text>