fix: expand kanban column drop zone to full height#18897
fix: expand kanban column drop zone to full height#18897JASSBR wants to merge 1 commit intotwentyhq:mainfrom
Conversation
The droppable area in kanban columns was limited to near the top, making it difficult to drop cards lower in the column. Fixes twentyhq#18842
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
Welcome!
Hello there, congrats on your first PR! We're excited to have you contributing to this project. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 1 file
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
There was a problem hiding this comment.
Pull request overview
This PR aims to make Kanban columns accept drag-and-drop across their full vertical height by ensuring the columns container stretches to fill the available board space.
Changes:
- Added
flex: 1to the columns wrapper (StyledColumnContainer) so the column layout can expand vertically with the board.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const StyledColumnContainer = styled.div` | ||
| display: flex; | ||
| flex: 1; | ||
|
|
||
| & > *:not(:first-of-type) { |
There was a problem hiding this comment.
Adding flex: 1 here may not fully address the Kanban drop-zone issue described in #18842. The current @hello-pangea/dnd setup still renders droppableProvided.placeholder outside the element that receives droppableProvided.innerRef/droppableProps (see RecordBoardColumn.tsx vs RecordBoardColumnCardsContainer.tsx), which violates the library’s contract and can still lead to incorrect droppable measurements during drag. Consider fixing the placeholder placement (or an equivalent approach that keeps memoization) and/or verify with a repro that this CSS change alone resolves the drop behavior in scrolled/empty column areas.
Summary
flex: 1toStyledColumnContainerinRecordBoardColumns.tsxTest plan
Fixes #18842