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:
Louis Knight-Webb
2025-11-04 12:51:12 +00:00
parent 5b0608aeef
commit b6d876a54b

View File

@@ -53,7 +53,7 @@ export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
return ( return (
<div <div
className={cn( className={cn(
'flex h-full min-h-40 flex-col', 'flex min-h-40 flex-col',
isOver ? 'outline-primary' : 'outline-black', isOver ? 'outline-primary' : 'outline-black',
className className
)} )}
@@ -203,7 +203,6 @@ function restrictToBoundingRectWithRightPadding(
boundingRect: ClientRect, boundingRect: ClientRect,
rightPadding: number rightPadding: number
): Transform { ): Transform {
console.log(rect, boundingRect);
const value = { const value = {
...transform, ...transform,
}; };
@@ -283,7 +282,7 @@ export const KanbanProvider = ({
> >
<div <div
className={cn( 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 className
)} )}
> >