From 3089da5657ecc4ca125d50e896c0e80831fcf2bb Mon Sep 17 00:00:00 2001
From: pvrn <78180340+pvrnn@users.noreply.github.com>
Date: Sun, 19 Oct 2025 20:01:40 +0200
Subject: [PATCH] Fix Calendar max height (#15127)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Implementation
- Add height: inherit so the Calendar fits the parent’s height:
https://github.com/twentyhq/twenty/blob/d7e32082628a616d1231d8d3f865ed6871b7f39e/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx#L33

- Add `min-height: 1000px `to ensure each week has a minimum height and
to avoid breaking the scroll wrapper on the Y-axis. Similarly to what is
done for the width.
- Issue: https://github.com/twentyhq/twenty/issues/15121

## testing
loom:
https://www.loom.com/share/31c65e62074c4b49979afcd58c856f07?sid=ec56606d-e050-4136-8397-222e14313312
---
 .../object-record/record-calendar/components/RecordCalendar.tsx | 2 +-
 .../record-calendar/month/components/RecordCalendarMonth.tsx    | 1 +
 .../month/components/RecordCalendarMonthBody.tsx                | 1 +
 .../month/components/RecordCalendarMonthBodyWeek.tsx            | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
index 11708de4ea..7baca3e57f 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
@@ -18,7 +18,7 @@ import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components';
 const StyledContainerContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: inherit;
   gap: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(1)};
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
index 20dd8ba24e..3eb7e40be3 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonth.tsx
@@ -19,6 +19,7 @@ import {
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   min-width: 1000px;
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
index 1699a205f4..d0388c7018 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
@@ -6,6 +6,7 @@ import { format } from 'date-fns';
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  flex: 1;
   border: 0.5px solid ${({ theme }) => theme.border.color.light};
   border-radius: 4px;
   overflow: hidden;
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
index 85701941f7..04a045786b 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
@@ -6,6 +6,7 @@ import { eachDayOfInterval, endOfWeek } from 'date-fns';
 const StyledContainer = styled.div`
   display: flex;
   align-items: stretch;
+  flex: 1;
 
   &:not(:last-of-type) {
     border-bottom: 0.5px solid ${({ theme }) => theme.border.color.light};