From 79269aa055822667685f51a24fd9fb0c1e281d6c Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Sun, 23 Aug 2026 01:44:06 +0200
Subject: [PATCH] fix: align data table scrollbars

---
 packages/ui/src/index.ts                          |  2 +-
 packages/ui/src/theme.ts                          |  2 +-
 packages/widgets/src/common/homarr-data-table.css | 10 ++++++++++
 packages/widgets/src/common/homarr-data-table.tsx |  4 +++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 1e8db7d58..da432f9d5 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,7 +2,7 @@ import type { MantineProviderProps } from "@mantine/core";
 
 import { theme } from "./theme";
 
-export { theme } from "./theme";
+export { scrollAreaDefaultProps, theme } from "./theme";
 export { modalSizeForm, modalSizeSelect } from "./theme/modal";
 export * from "./components";
 
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 4466cab5f..976f4be2b 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -2,7 +2,7 @@ import { createTheme, rem } from "@mantine/core";
 
 import { modalComponent } from "./theme/modal";
 
-const scrollAreaDefaultProps = {
+export const scrollAreaDefaultProps = {
   type: "hover",
   scrollbarSize: 2,
   scrollHideDelay: 500,
diff --git a/packages/widgets/src/common/homarr-data-table.css b/packages/widgets/src/common/homarr-data-table.css
index 22b6b358d..90e42b3f5 100644
--- a/packages/widgets/src/common/homarr-data-table.css
+++ b/packages/widgets/src/common/homarr-data-table.css
@@ -22,6 +22,16 @@
   background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
 }
 
+.homarr-data-table .mantine-datatable-scroll-area-scrollbar[data-state="visible"]:hover {
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-8);
+  }
+}
+
 .homarr-data-table th {
   padding: 0;
   white-space: nowrap;
diff --git a/packages/widgets/src/common/homarr-data-table.tsx b/packages/widgets/src/common/homarr-data-table.tsx
index 511e38e72..d79b07674 100644
--- a/packages/widgets/src/common/homarr-data-table.tsx
+++ b/packages/widgets/src/common/homarr-data-table.tsx
@@ -6,6 +6,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DataTableColumn, DataTableProps } from "mantine-datatable";
 import { DataTable } from "mantine-datatable";
 
+import { scrollAreaDefaultProps } from "@homarr/ui";
+
 const fallbackColumnWidth = 60;
 
 const getColumnWidth = (width: string | number | undefined): number => {
@@ -153,7 +155,7 @@ export function HomarrDataTable<T>({
         resizable: !isEditMode,
         cellsStyle: defaultColumnProps?.cellsStyle ?? (() => ({ padding: cellPadding })),
       }}
-      scrollAreaProps={scrollAreaProps}
+      scrollAreaProps={{ ...scrollAreaDefaultProps, ...scrollAreaProps }}
     />
   );
 }