From 1b985ed5b1457047f3445dcca7dc82739561130a Mon Sep 17 00:00:00 2001 From: Weiko Date: Wed, 1 Oct 2025 16:31:41 +0200 Subject: [PATCH] Fix calendar padding and set calendar top bar fixed (#14815) --- .../components/RecordCalendar.tsx | 38 +++++++++---------- .../components/RecordCalendarMonthBodyDay.tsx | 2 - .../RecordCalendarMonthBodyWeek.tsx | 1 + 3 files changed, 20 insertions(+), 21 deletions(-) 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 6fdb16ec0c..11708de4ea 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 @@ -1,27 +1,27 @@ import styled from '@emotion/styled'; -import { RecordCalendarTopBar } from '@/object-record/record-calendar/components/RecordCalendarTopBar'; -import { RecordCalendarMonth } from '@/object-record/record-calendar/month/components/RecordCalendarMonth'; -import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext'; -import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId'; import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId'; +import { RecordCalendarTopBar } from '@/object-record/record-calendar/components/RecordCalendarTopBar'; +import { RECORD_CALENDAR_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-calendar/constants/RecordCalendarClickOutsideListenerId'; +import { RecordCalendarMonth } from '@/object-record/record-calendar/month/components/RecordCalendarMonth'; +import { RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardClickOutsideId'; +import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext'; +import { useRecordCalendarSelection } from '@/object-record/record-calendar/states/selectors/useRecordCalendarSelection'; import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId'; import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId'; -import { RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardClickOutsideId'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components'; -import { useRecordCalendarSelection } from '@/object-record/record-calendar/states/selectors/useRecordCalendarSelection'; -import { RECORD_CALENDAR_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-calendar/constants/RecordCalendarClickOutsideListenerId'; const StyledContainerContainer = styled.div` display: flex; flex-direction: column; - min-height: calc(100% - ${({ theme }) => theme.spacing(2)}); - height: min-content; + height: 100%; gap: ${({ theme }) => theme.spacing(2)}; - padding: ${({ theme }) => theme.spacing(3)}; + padding: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(1)}; `; export const RecordCalendar = () => { @@ -48,13 +48,13 @@ export const RecordCalendar = () => { }); return ( - - - + + + - - + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx index e9408eb512..e05f28a5f0 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx @@ -47,8 +47,6 @@ const StyledDayHeader = styled.div` flex-direction: row; height: 24px; justify-content: space-between; - margin-bottom: ${({ theme }) => theme.spacing(2)}; - margin-top: ${({ theme }) => theme.spacing(1.5)}; margin-left: none; width: 100%; `; 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 a3a3108acb..85701941f7 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 @@ -5,6 +5,7 @@ import { eachDayOfInterval, endOfWeek } from 'date-fns'; const StyledContainer = styled.div` display: flex; + align-items: stretch; &:not(:last-of-type) { border-bottom: 0.5px solid ${({ theme }) => theme.border.color.light};