From b6d876a54b5c19b79f410756a5ea9afcb0cf49e8 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Tue, 4 Nov 2025 12:51:12 +0000
Subject: [PATCH] Can't drag task onto kanban below page fold (vibe-kanban)
 (#1179)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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.
---
 frontend/src/components/ui/shadcn-io/kanban/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/shadcn-io/kanban/index.tsx b/frontend/src/components/ui/shadcn-io/kanban/index.tsx
index 10ba49ba..93527fbc 100644
--- a/frontend/src/components/ui/shadcn-io/kanban/index.tsx
+++ b/frontend/src/components/ui/shadcn-io/kanban/index.tsx
@@ -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
         )}
       >