fix: expand kanban column drop zone to full height (#18897)

## Summary
- Added `flex: 1` to `StyledColumnContainer` in `RecordBoardColumns.tsx`
- The column wrapper wasn't stretching vertically, so the droppable area
only covered the top of each column where cards existed
- Now the entire column height is a valid drop target

## Test plan
- [ ] Open a board/kanban view
- [ ] Drag a card from one column
- [ ] Drop it in the lower/empty area of another column
- [ ] Verify the drop registers correctly

Fixes #18842
This commit is contained in:
Yassir S.
2026-04-10 14:54:45 +02:00
committed by GitHub
parent 31baf52528
commit 61720470c5
3 changed files with 9 additions and 14 deletions
@@ -7,6 +7,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledColumnContainer = styled.div`
display: flex;
flex: 1;
& > *:not(:first-of-type) {
border-left: 1px solid ${themeCssVariables.border.color.light};
@@ -15,11 +15,8 @@ import { isDefined } from 'twenty-shared/utils';
const StyledColumn = styled.div`
background-color: ${themeCssVariables.background.primary};
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
max-width: 200px;
min-height: 100%;
min-width: 200px;
padding: ${themeCssVariables.spacing[2]};
padding-top: 0px;
@@ -63,14 +60,17 @@ export const RecordBoardColumn = ({
columnIndex: recordBoardColumnIndex,
}}
>
<Droppable droppableId={recordBoardColumnId}>
<Droppable droppableId={recordBoardColumnId} ignoreContainerClipping>
{(droppableProvided) => (
<StyledColumn>
<StyledColumn
ref={droppableProvided.innerRef}
// oxlint-disable-next-line react/jsx-props-no-spreading
{...droppableProvided.droppableProps}
>
<DragAndDropLibraryLegacyReRenderBreaker
memoizationId={recordBoardColumnId}
>
<RecordBoardColumnCardsContainer
droppableProvided={droppableProvided}
recordBoardColumnId={recordBoardColumnId}
/>
</DragAndDropLibraryLegacyReRenderBreaker>
@@ -1,4 +1,4 @@
import { Draggable, type DroppableProvided } from '@hello-pangea/dnd';
import { Draggable } from '@hello-pangea/dnd';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -25,12 +25,10 @@ const StyledNewButtonContainer = styled.div`
type RecordBoardColumnCardsContainerProps = {
recordBoardColumnId: string;
droppableProvided: DroppableProvided;
};
export const RecordBoardColumnCardsContainer = ({
recordBoardColumnId,
droppableProvided,
}: RecordBoardColumnCardsContainerProps) => {
const { columnDefinition } = useContext(RecordBoardColumnContext);
@@ -45,11 +43,7 @@ export const RecordBoardColumnCardsContainer = ({
);
return (
<StyledColumnCardsContainer
ref={droppableProvided?.innerRef}
// oxlint-disable-next-line react/jsx-props-no-spreading
{...droppableProvided?.droppableProps}
>
<StyledColumnCardsContainer>
{recordIndexRecordIdsByGroup.map((recordId, index) => (
<RecordBoardCardDraggableContainer
key={recordId}