From 9b57c5dfacdecf8586626043399ed24735a6d76e Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Fri, 26 Jun 2026 10:19:24 +0200
Subject: [PATCH] Set record card header height and calendar spacing (#22187)

## Summary

Sets the shared `RecordCardHeaderContainer` height to `32px`, so board
and calendar card headers use the same common header size.

Updates the board fetch-more card-height estimate to use the same `32px`
header value.

Reduces the calendar card header/content gap by removing the body top
padding while keeping the existing side and bottom padding.

## Screenshots

Before:


![Before](https://raw.githubusercontent.com/twentyhq/twenty/bonapara/pr-assets-kanban-card-header-auto-height/.github/pr-screenshots/kanban-card-header-auto-height/before.jpg)

After:


![After](https://raw.githubusercontent.com/twentyhq/twenty/bonapara/pr-assets-kanban-card-header-auto-height/.github/pr-screenshots/kanban-card-header-auto-height/after.jpg)

## Validation

- Browser verification on
`http://apple.localhost:3001/objects/opportunities?viewId=0433d066-dda7-4b2c-89e5-04d4792d193c`:
visible calendar card body padding computes to `0px 4px 4px`
- Browser verification on board view: visible board card headers compute
to `32px`
- Browser console errors: none
- `git diff --check`
- `prettier --write` on changed files
- `oxlint --type-aware` on changed files in the running checkout
---
 .../components/RecordBoardFetchMoreInViewTriggerComponent.tsx | 4 ++--
 .../components/RecordCalendarCardBody.tsx                     | 4 +++-
 .../record-card/components/RecordCardHeaderContainer.tsx      | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardFetchMoreInViewTriggerComponent.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardFetchMoreInViewTriggerComponent.tsx
index 2fa1d27e7e..604c16e57d 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardFetchMoreInViewTriggerComponent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardFetchMoreInViewTriggerComponent.tsx
@@ -24,8 +24,8 @@ const StyledFetchMoreTriggerDiv = styled.div<{ width: number }>`
   min-width: ${({ width }) => width}px;
 `;
 
-// RecordCardHeaderContainer: height (24px) + padding top spacing(2) + padding bottom spacing(1)
-const BOARD_CARD_HEADER_HEIGHT = 24 + 8 + 4;
+// RecordCardHeaderContainer: height (32px) + padding top spacing(2) + padding bottom spacing(1)
+const BOARD_CARD_HEADER_HEIGHT = 32 + 8 + 4;
 
 // Per field row: skeleton height + RecordCardBodyContainer padding-bottom spacing(2) + StyledBodyContainer gap spacing(0.5)
 const BOARD_CARD_FIELD_ROW_HEIGHT =
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx
index 48472183c0..33649b0298 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx
@@ -72,7 +72,9 @@ export const RecordCalendarCardBody = ({
   };
 
   return (
-    <RecordCardBodyContainer padding={themeCssVariables.spacing[1]}>
+    <RecordCardBodyContainer
+      padding={`0 ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[1]}`}
+    >
       {visibleRecordFieldsExceptLabelIdentifier.map((recordField, index) => {
         const correspondingFieldDefinition =
           fieldDefinitionByFieldMetadataItemId[recordField.fieldMetadataItemId];
diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx
index 5a9c38d764..35673ebef3 100644
--- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx
@@ -9,7 +9,7 @@ export const StyledBoardCardHeaderContainer = styled.div<{
   display: flex;
   flex-direction: row;
   font-weight: ${themeCssVariables.font.weight.medium};
-  height: 24px;
+  height: 32px;
   justify-content: space-between;
   padding: ${({ padding, isCompact }) =>
     padding ??