From 1d27da22303b2133bb1a7c59102b7c292bc34833 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Mon, 26 May 2025 11:40:42 +0200
Subject: [PATCH] fix(calendar): remove scrollbar for 2x2 (#3227)

---
 packages/widgets/src/calendar/calender-day.tsx |  4 ++--
 packages/widgets/src/calendar/component.tsx    | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/calendar/calender-day.tsx b/packages/widgets/src/calendar/calender-day.tsx
index 7fcef5396..a0d2644ee 100644
--- a/packages/widgets/src/calendar/calender-day.tsx
+++ b/packages/widgets/src/calendar/calender-day.tsx
@@ -44,8 +44,8 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
           h="100%"
           w="100%"
           p={0}
-          pt={isSmall ? 5 : 20}
-          pb={isSmall ? 5 : 20}
+          pt={isSmall ? 0 : 10}
+          pb={isSmall ? 0 : 10}
           m={0}
           bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
           style={{
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 45e48bde2..bb9a067c1 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -68,6 +68,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const mantineTheme = useMantineTheme();
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
   const { ref, width, height } = useElementSize();
+  const isSmall = width < 256;
 
   return (
     <Calendar
@@ -82,16 +83,20 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
       firstDayOfWeek={firstDayOfWeek}
       static={isEditMode}
       className={classes.calendar}
-      w={"100%"}
-      h={"100%"}
+      w="100%"
+      h="100%"
       ref={ref}
       styles={{
         calendarHeaderControl: {
           pointerEvents: isEditMode ? "none" : undefined,
           borderRadius: "md",
+          height: isSmall ? "1.5rem" : undefined,
+          width: isSmall ? "1.5rem" : undefined,
         },
         calendarHeaderLevel: {
           pointerEvents: "none",
+          fontSize: isSmall ? "0.75rem" : undefined,
+          height: "100%",
         },
         levelsGroup: {
           height: "100%",
@@ -107,10 +112,12 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
         day: {
           borderRadius: actualItemRadius,
           width: "100%",
-          height: "auto",
+          height: "100%",
           position: "relative",
         },
-        month: {},
+        month: {
+          height: "100%",
+        },
         weekday: {
           padding: 0,
         },