fix: cover all widget scroll areas

packages/ui/src/theme.ts

@@ -2,6 +2,13 @@ import { createTheme, rem } from "@mantine/core";
 
 import { modalComponent } from "./theme/modal";
 
+const scrollAreaDefaultProps = {
+  type: "hover",
+  scrollbarSize: 2,
+  scrollHideDelay: 500,
+  offsetScrollbars: true,
+} as const;
+
 export const theme = createTheme({
   primaryColor: "red",
   autoContrast: true,
@@ -97,12 +104,10 @@ export const theme = createTheme({
       },
     },
     ScrollArea: {
-      defaultProps: {
-        type: "hover",
-        scrollbarSize: 2,
-        scrollHideDelay: 500,
-        offsetScrollbars: true,
-      },
+      defaultProps: scrollAreaDefaultProps,
+    },
+    ScrollAreaAutosize: {
+      defaultProps: scrollAreaDefaultProps,
     },
     LoadingOverlay: {
       defaultProps: {

packages/widgets/src/common/homarr-data-table.tsx

@@ -153,7 +153,7 @@ export function HomarrDataTable<T>({
         resizable: !isEditMode,
         cellsStyle: defaultColumnProps?.cellsStyle ?? (() => ({ padding: cellPadding })),
       }}
-      scrollAreaProps={{ type: "auto", scrollbarSize: 6, ...scrollAreaProps }}
+      scrollAreaProps={scrollAreaProps}
     />
   );
 }

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

@@ -5,7 +5,6 @@
 }
 
 .chartSurface :global(.mantine-ScrollArea-viewport),
-.chartSurface :global(.mantine-ScrollArea-scrollbar),
 .chartSurface :global(.recharts-wrapper),
 .chartSurface :global(.recharts-surface) {
   background-color: transparent !important;