feat: #4452 improve calendar design

packages/widgets/src/calendar/calender-day.tsx

@@ -1,11 +1,17 @@
 import { useState } from "react";
 import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+
+
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 
+
+
 import { CalendarEventList } from "./calendar-event-list";
 
+
 interface CalendarDayProps {
   date: Date;
   events: CalendarEvent[];
@@ -17,6 +23,7 @@ interface CalendarDayProps {
 export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
   const [opened, setOpened] = useState(false);
   const { primaryColor } = useMantineTheme();
+  const { ref, height } = useElementSize();
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
@@ -25,6 +32,8 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
   const shouldScaleDown = minAxisSize < 350;
   const isSmall = rootHeight < 256;
 
+  const isTooSmallForIndicators = height < 30;
+
   return (
     <Popover
       position="bottom"
@@ -47,6 +56,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
           pt={isSmall ? 0 : 10}
           pb={isSmall ? 0 : 10}
           m={0}
+          ref={ref}
           bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
           style={{
             alignContent: "center",
@@ -62,7 +72,9 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
           <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
             {date.getDate()}
           </Text>
-          <NotificationIndicator events={events} isSmall={isSmall} />
+          {!isTooSmallForIndicators && (
+            <NotificationIndicator events={events} isSmall={isSmall} />
+          )}
         </Container>
       </Popover.Target>
       {/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
@@ -82,9 +94,9 @@ const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps)
   const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(String);
   /* position bottom is lower when small to not be on top of number*/
   return (
-    <Flex w="75%" pos={"absolute"} bottom={isSmall ? 4 : 10} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
+    <Flex w="75%" align={"center"} pos={"absolute"} gap={3} bottom={isSmall ? 4 : 10} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
       {notificationEvents.map((notificationEvent) => {
-        return <Box key={notificationEvent} bg={notificationEvent} h={2} p={0} style={{ flex: 1, borderRadius: 5 }} />;
+        return <Box key={notificationEvent} bg={notificationEvent} h={4} w={4} p={0} style={{ borderRadius: 999 }} />;
       })}
     </Flex>
   );

packages/widgets/src/calendar/component.tsx

@@ -124,19 +124,27 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
         },
         monthCell: {
           textAlign: "center",
+          position: "relative"
         },
         day: {
           borderRadius: actualItemRadius,
           width: "100%",
           height: "100%",
-          position: "relative",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0
         },
         month: {
           height: "100%",
         },
         weekday: {
           padding: 0,
         },
+        weekdaysRow: {
+          height: 22
+        }
       }}
       renderDay={(tileDate) => {
         const eventsForDate = normalizedEvents