From 61720470c528009fe38221614a0eaf3ecca3af92 Mon Sep 17 00:00:00 2001
From: "Yassir S." <96038957+JASSBR@users.noreply.github.com>
Date: Fri, 10 Apr 2026 14:54:45 +0200
Subject: [PATCH] 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
---
 .../record-board/components/RecordBoardColumns.tsx   |  1 +
 .../components/RecordBoardColumn.tsx                 | 12 ++++++------
 .../components/RecordBoardColumnCardsContainer.tsx   | 10 ++--------
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardColumns.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardColumns.tsx
index 5921f01489..3e6d7fec7c 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardColumns.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardColumns.tsx
@@ -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};
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
index 4f5f11c192..cb9d782889 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
@@ -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>
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
index b7f7d94c2e..9fc6a83c3d 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
@@ -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}