From 584c660906f5ae7e8ab1c88ce9cfbbbbdcdb5145 Mon Sep 17 00:00:00 2001
From: Yossi Hillali <hillaliy@me.com>
Date: Sat, 8 Feb 2025 11:37:26 +0200
Subject: [PATCH] fix(calendar): info popover overlap (#2268)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
---
 packages/widgets/src/calendar/calender-day.tsx | 14 +++++++++-----
 packages/widgets/src/calendar/component.tsx    |  4 +++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/calendar/calender-day.tsx b/packages/widgets/src/calendar/calender-day.tsx
index 95303a704..698cfba3a 100644
--- a/packages/widgets/src/calendar/calender-day.tsx
+++ b/packages/widgets/src/calendar/calender-day.tsx
@@ -1,5 +1,5 @@
+import { useState } from "react";
 import { Container, Popover, useMantineTheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 
 import type { CalendarEvent } from "@homarr/integrations/types";
 
@@ -12,7 +12,7 @@ interface CalendarDayProps {
 }
 
 export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
-  const [opened, { close, open }] = useDisclosure(false);
+  const [opened, setOpend] = useState(false);
   const { primaryColor } = useMantineTheme();
 
   return (
@@ -25,13 +25,12 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
       transitionProps={{
         transition: "pop",
       }}
-      onClose={close}
+      onChange={setOpend}
       opened={opened}
       disabled={disabled}
     >
       <Popover.Target>
         <Container
-          onClick={events.length > 0 && !opened ? open : close}
           h="100%"
           w="100%"
           p={0}
@@ -40,7 +39,12 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
           style={{
             alignContent: "center",
             borderRadius: "3.5cqmin",
-            cursor: events.length === 0 || disabled ? "default" : "pointer",
+            cursor: disabled ? "default" : "pointer",
+          }}
+          onClick={() => {
+            if (disabled) return;
+
+            setOpend((prev) => !prev);
           }}
         >
           <div
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 3f652d770..ec14f3e11 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -121,7 +121,9 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
             )?.date,
           }))
           .filter((event): event is CalendarEvent => Boolean(event.date));
-        return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode} />;
+        return (
+          <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode || eventsForDate.length === 0} />
+        );
       }}
     />
   );