Calendar widget styling

src/widgets/calendar/CalendarTile.tsx

@@ -1,4 +1,4 @@
-import { Center, createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core';
+import { createStyles, Group, MantineThemeColors, useMantineTheme } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
 import { IconCalendarTime } from '@tabler/icons';
 import { useQuery } from '@tanstack/react-query';
@@ -21,7 +21,7 @@ const definition = defineWidget({
     },
   },
   gridstack: {
-    minWidth: 4,
+    minWidth: 3,
     minHeight: 5,
     maxWidth: 12,
     maxHeight: 12,
@@ -55,35 +55,37 @@ function CalendarTile({ widget }: CalendarTileProps) {
   });
 
   return (
-    <Calendar
+    <Group grow style={{ height: '100%' }}>
-      month={month}
+      <Calendar
-      // Should be offset 5px to the left
+        month={month}
-      style={{ position: 'relative', left: -10, top: -10 }}
+        // Should be offset 5px to the left
-      onMonthChange={setMonth}
+        style={{ position: 'relative', top: -10 }}
-      size="xs"
+        onMonthChange={setMonth}
-      fullWidth
+        size="xs"
-      onChange={() => {}}
+        fullWidth
-      firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
+        onChange={() => {}}
-      dayStyle={(date) => ({
+        firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
-        margin: 1,
+        dayStyle={(date) => ({
-        backgroundColor: isToday(date)
+          margin: 1,
-          ? colorScheme === 'dark'
+          backgroundColor: isToday(date)
-            ? colors.dark[5]
+            ? colorScheme === 'dark'
-            : colors.gray[0]
+              ? colors.dark[5]
-          : undefined,
+              : colors.gray[0]
-      })}
+            : undefined,
-      styles={{
+        })}
-        calendarHeader: {
+        styles={{
-          marginRight: 40,
+          calendarHeader: {
-          marginLeft: 40,
+            marginRight: 40,
-        },
+            marginLeft: 40,
-      }}
+          },
-      allowLevelChange={false}
+        }}
-      dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
+        allowLevelChange={false}
-      renderDay={(date) => (
+        dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
-        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} />
+        renderDay={(date) => (
-      )}
+          <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} />
-    />
+        )}
+      />
+    </Group>
   );
 }