Implementing Expansible Columns

[Adebesin-Cell]

Hi everyone 👋,

I'm currently working on enhancing the drag-and-drop functionality in my project. I've successfully implemented the basic drag-and-drop features, and they work great—thanks for such a fantastic library!

I'm looking to add a feature where the columns in my board can dynamically expand to accommodate an item being dragged into them, similar to how columns in a GitHub kanban board adjust. When a column is full, I'd like it to scroll vertically if more items are added beyond the visible area.

Here’s the relevant part of my current implementation:

<DndContext
  sensors={sensors}
  onDragStart={handleDragStart}
  onDragEnd={handleDragEnd}
>
  <div className='flex h-full gap-4 p-4'>
    {columns.map((column) => (
      <ItineraryColumn
        key={column.id}
        column={column}
        service={service}
        initialUsers={initialUsers}
      />
    ))}
  </div>
  <DragOverlay>
    {activeTask && (
      <ItineraryCard
        task={activeTask}
        serviceId={service.serviceId}
        initialUsers={initialUsers}
      />
    )}
  </DragOverlay>
</DndContext>

And the droppable area setup:

const { setNodeRef } = useDroppable({
  id: column.id,
  data: {
    type: "column",
    column,
  },
});

<SortableContext
  id={column.id}
  items={column.itineraries.map((task) => task.id)}
>
  {column.itineraries.map((task) => (
    <ItineraryCard
      key={task.id}
      task={task}
      serviceId={service.serviceId}
      initialUsers={initialUsers}
    />
  ))}
  {column.itineraries.length === 0 && (
    <p className="text-sm py-5 text-muted-foreground">
      Drop items here
    </p>
  )}
</SortableContext>

You can see a live demo of the current functionality in the video and what I am striving to implement https://kanban-board-blond-nine.vercel.app/.

Screen.Recording.2025-01-05.at.1.49.20.PM.mov

Any suggestions on how I can achieve this expansible column functionality would be greatly appreciated!

Thank you!