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
This commit is contained in:
Thomas des Francs
2026-06-26 10:19:24 +02:00
committed by GitHub
parent 85f64abb28
commit 9b57c5dfac
3 changed files with 6 additions and 4 deletions
@@ -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 =
@@ -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];
@@ -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 ??