🐛 Fix Calendar

src/widgets/calendar/CalendarDay.tsx

@@ -1,4 +1,4 @@
-import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { ActionIcon, Box, Button, Indicator, IndicatorProps, Popover } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { isToday } from '../../tools/shared/time/date.tool';
 import { MediaList } from './MediaList';
@@ -70,7 +70,7 @@ const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps)
   if (medias.length === 0) return children;
 
   return (
-    <Indicator size={10} withBorder offset={5} color={color} position={position}>
+    <Indicator size={10} withBorder offset={-5} color={color} position={position}>
       {children}
     </Indicator>
   );

src/widgets/calendar/CalendarTile.tsx

@@ -9,6 +9,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';
 import { MediasType } from './type';
+import { useColorTheme } from '../../tools/color';
 
 const definition = defineWidget({
   id: 'calendar',
@@ -50,6 +51,7 @@ interface CalendarTileProps {
 function CalendarTile({ widget }: CalendarTileProps) {
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
+  const { secondaryColor } = useColorTheme();
 
   const { data: medias } = useQuery({
     queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
@@ -65,7 +67,6 @@ function CalendarTile({ widget }: CalendarTileProps) {
   });
 
   return (
-    <Group grow style={{ height: '100%' }}>
     <Calendar
       defaultDate={new Date()}
       onPreviousMonth={setMonth}
@@ -74,11 +75,19 @@ function CalendarTile({ widget }: CalendarTileProps) {
       locale={i18n?.resolvedLanguage ?? 'en'}
       firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
       hideWeekdays
+      style={{ position: 'relative', top: -10 }}
       date={month}
+      maxLevel="month"
       hasNextLevel={false}
       styles={{
+        calendarHeader: {
+          maxWidth: 'inherit',
+        },
         calendar: {
           height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
         },
         monthLevelGroup: {
           height: '100%',
@@ -92,15 +101,11 @@ function CalendarTile({ widget }: CalendarTileProps) {
         month: {
           flex: 1,
         },
-          calendarHeader: {
-            maxWidth: 'inherit',
-          },
       }}
       renderDay={(date) => (
         <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
       )}
     />
-    </Group>
   );
 }