From 28fefcd23f4575b512dbe46ca27964886e7e8b0c Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Tue, 21 Jul 2026 17:58:19 +0200
Subject: [PATCH] fix(widgets): fix hover card disappearing and remove group
 wrapper

- Remove wrapper div that broke HoverCard hover tracking between
  target and dropdown (root cause of instant disappear)
- Remove useElementSize, always show notification dots
- Increase closeDelay to 400ms (per Mantine interactive-elements
  pattern) so users can move mouse into dropdown with link buttons
- Remove HoverCard.Group from component.tsx per feedback
---
 .../widgets/src/calendar/calender-day.tsx     | 78 +++++++++----------
 packages/widgets/src/calendar/component.tsx   | 10 +--
 2 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/packages/widgets/src/calendar/calender-day.tsx b/packages/widgets/src/calendar/calender-day.tsx
index 390777998..650356d2c 100644
--- a/packages/widgets/src/calendar/calender-day.tsx
+++ b/packages/widgets/src/calendar/calender-day.tsx
@@ -1,5 +1,4 @@
 import { Box, Container, Flex, HoverCard, Text, useMantineTheme } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
@@ -15,7 +14,6 @@ interface CalendarDayProps {
 }
 
 export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
-  const { ref, height } = useElementSize();
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
@@ -24,47 +22,43 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
   const shouldScaleDown = minAxisSize < 350;
   const isSmall = rootHeight < 256;
 
-  const isTooSmallForIndicators = height < 30;
-
   return (
-    <div ref={ref} style={{ width: "100%", height: "100%" }}>
-      <HoverCard
-        position="bottom"
-        withArrow
-        withinPortal
-        radius="lg"
-        shadow="sm"
-        transitionProps={{ transition: "pop" }}
-        openDelay={350}
-        closeDelay={200}
-        disabled={disabled}
-      >
-        <HoverCard.Target>
-          <Container
-            h="100%"
-            w="100%"
-            p={0}
-            pt={isSmall ? 0 : 10}
-            pb={isSmall ? 0 : 10}
-            m={0}
-            pos="relative"
-            style={{
-              alignContent: "center",
-              borderRadius: actualItemRadius,
-              cursor: disabled ? "default" : "pointer",
-            }}
-          >
-            <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
-              {date.getDate()}
-            </Text>
-            {!isTooSmallForIndicators && <NotificationIndicator events={events} isSmall={isSmall} />}
-          </Container>
-        </HoverCard.Target>
-        <HoverCard.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
-          <CalendarEventList events={events} />
-        </HoverCard.Dropdown>
-      </HoverCard>
-    </div>
+    <HoverCard
+      position="bottom"
+      withArrow
+      withinPortal
+      radius="lg"
+      shadow="sm"
+      transitionProps={{ transition: "pop" }}
+      openDelay={350}
+      closeDelay={400}
+      disabled={disabled}
+    >
+      <HoverCard.Target>
+        <Container
+          h="100%"
+          w="100%"
+          p={0}
+          pt={isSmall ? 0 : 10}
+          pb={isSmall ? 0 : 10}
+          m={0}
+          pos="relative"
+          style={{
+            alignContent: "center",
+            borderRadius: actualItemRadius,
+            cursor: disabled ? "default" : "pointer",
+          }}
+        >
+          <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
+            {date.getDate()}
+          </Text>
+          <NotificationIndicator events={events} isSmall={isSmall} />
+        </Container>
+      </HoverCard.Target>
+      <HoverCard.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
+        <CalendarEventList events={events} />
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 };
 
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 6bbe91a77..3980b83fa 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
-import { useMantineTheme, HoverCard } from "@mantine/core";
+import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
 import dayjs from "dayjs";
@@ -67,9 +67,8 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const normalizedEvents = useMemo(() => splitEvents(events), [events]);
 
   return (
-    <HoverCard.Group openDelay={350} closeDelay={200}>
-      <Calendar
-        defaultDate={new Date()}
+    <Calendar
+      defaultDate={new Date()}
         onPreviousMonth={(month) => setMonth(new Date(month))}
         onNextMonth={(month) => setMonth(new Date(month))}
         highlightToday
@@ -145,8 +144,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
             />
           );
         }}
-      />
-    </HoverCard.Group>
+    />
   );
 };