Can't drag task onto kanban below page fold (vibe-kanban) (#1179)
* Removed the fixed-height clamp on each kanban column so the droppable area now grows with its contents, allowing drops below the fold (`frontend/src/components/ui/shadcn-io/kanban/index.tsx:56`). **Verification** - Not run (please drag a card to a column section below the fold in the UI to confirm the drop now registers). **Next Steps** 1. If everything feels good, rerun your usual frontend checks (`npm run check` / `npm run lint`) to be safe. * - Kanban column droppables no longer stretch to the grid’s fixed height, letting their hitboxes grow with overflowing cards (`frontend/src/components/ui/shadcn-io/kanban/index.tsx:55`). - Grid wrapper now aligns columns to the top and uses `min-h-full` instead of `h-full`, so the overall droppable area expands with content while still filling the viewport (`frontend/src/components/ui/shadcn-io/kanban/index.tsx:123`). Verification - Not run. Please drag a card onto a column section below the fold to confirm the drop now succeeds. * Kanban columns now stretch to match the tallest column while keeping the drop targets working below the fold. I switched the grid wrapper to stretch its children so every column inherits the same track height, and I removed the leftover debug log (`frontend/src/components/ui/shadcn-io/kanban/index.tsx:137` and `frontend/src/components/ui/shadcn-io/kanban/index.tsx:205`). With the earlier `h-full` clamp gone, droppables still follow the content height; now shorter columns pick up the extra space so borders remain continuous all the way down. Verification - Not run. Please sanity-check in the UI by dragging across tall columns and confirming the vertical dividers stay visible through the scroll region. Next Steps 1. Run `npm run lint` or `npm run check` to be safe before opening the PR.
This commit is contained in:
@@ -53,7 +53,7 @@ export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-full min-h-40 flex-col',
|
||||
'flex min-h-40 flex-col',
|
||||
isOver ? 'outline-primary' : 'outline-black',
|
||||
className
|
||||
)}
|
||||
@@ -203,7 +203,6 @@ function restrictToBoundingRectWithRightPadding(
|
||||
boundingRect: ClientRect,
|
||||
rightPadding: number
|
||||
): Transform {
|
||||
console.log(rect, boundingRect);
|
||||
const value = {
|
||||
...transform,
|
||||
};
|
||||
@@ -283,7 +282,7 @@ export const KanbanProvider = ({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'inline-grid grid-flow-col auto-cols-[minmax(200px,400px)] divide-x border-x h-full',
|
||||
'inline-grid grid-flow-col auto-cols-[minmax(200px,400px)] divide-x border-x items-stretch min-h-full',
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user