From ab3c8b4d1fc5378df35e7c0fd81ca9c9a01399e5 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 7 Jun 2026 02:05:01 +0200
Subject: [PATCH] feat(board): mount widget hover overlay on dashboard grid
 items

---
 apps/nextjs/src/components/board/sections/content.tsx | 3 ++-
 apps/nextjs/src/styles/gridstack.scss                 | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index 9c6e475d4..890673fde 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -4,6 +4,7 @@ import type { GridItemHTMLElement } from "@homarr/gridstack";
 
 import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
+import { WidgetHoverOverlay } from "../items/widget-hover-overlay";
 import { BoardDynamicSection } from "./dynamic-section";
 import { GridStackItem } from "./gridstack/gridstack-item";
 import { useSectionContext } from "./section-context";
@@ -44,7 +45,6 @@ interface ItemProps {
 const Item = ({ item, innerRef }: ItemProps) => {
   const minWidth = useMinSize(item, "x");
   const minHeight = useMinSize(item, "y");
-
   return (
     <GridStackItem
       key={item.id}
@@ -59,6 +59,7 @@ const Item = ({ item, innerRef }: ItemProps) => {
       minWidth={minWidth}
       minHeight={minHeight}
     >
+      {item.type === "item" && item.kind !== "app" && <WidgetHoverOverlay item={item} />}
       {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
     </GridStackItem>
   );
diff --git a/apps/nextjs/src/styles/gridstack.scss b/apps/nextjs/src/styles/gridstack.scss
index 615278f80..1542b0282 100644
--- a/apps/nextjs/src/styles/gridstack.scss
+++ b/apps/nextjs/src/styles/gridstack.scss
@@ -102,6 +102,10 @@
   overflow-y: auto;
 }
 
+.grid-stack > .grid-stack-item[data-type="item"] {
+  overflow: visible;
+}
+
 .grid-stack.grid-stack-animate {
   transition: none;
 }