From 6df2f92268d95befa8e43edf7d63b3dd05d31b9c Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Tue, 21 Jul 2026 16:14:34 +0200
Subject: [PATCH] fix(widgets): use HoverCard with openDelay for calendar day
 events

Replaces Popover with Mantine HoverCard for built-in hover behavior:
- openDelay={350} prevents triggering when dragging across days
- closeOnClickOutside and closeOnEscape are true by default
- No manual mouse handlers or state needed
---
 packages/widgets/src/calendar/calender-day.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/widgets/src/calendar/calender-day.tsx b/packages/widgets/src/calendar/calender-day.tsx
index be6d9d63f..269cec3d2 100644
--- a/packages/widgets/src/calendar/calender-day.tsx
+++ b/packages/widgets/src/calendar/calender-day.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
+import { Box, Container, Flex, HoverCard, Text, useMantineTheme } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -28,16 +28,17 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
   const isTooSmallForIndicators = height < 30;
 
   return (
-    <Popover
+    <HoverCard
       position="bottom"
       withArrow
       withinPortal
       radius="lg"
       shadow="sm"
       transitionProps={{ transition: "pop" }}
+      openDelay={350}
       disabled={disabled}
     >
-      <Popover.Target>
+      <HoverCard.Target>
         <Container
           h="100%"
           w="100%"
@@ -58,11 +59,11 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
           </Text>
           {!isTooSmallForIndicators && <NotificationIndicator events={events} isSmall={isSmall} />}
         </Container>
-      </Popover.Target>
-      <Popover.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
+      </HoverCard.Target>
+      <HoverCard.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
         <CalendarEventList events={events} />
-      </Popover.Dropdown>
-    </Popover>
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 };