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:
+1
@@ -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};
|
||||
|
||||
+6
-6
@@ -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>
|
||||
|
||||
+2
-8
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user