#434

frontend/src/components/common/SortableList.tsx

@@ -1,5 +1,6 @@
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
-         closestCenter, useDroppable, useSensor, useSensors } from '@dnd-kit/core'
+         closestCenter, pointerWithin, useDroppable, useSensor, useSensors }
+    from '@dnd-kit/core'
 import { SortableContext, arrayMove, rectSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import { useId, useRef, useState } from 'react'
@@ -25,7 +26,7 @@ const sameGroups = (left: Groups, right: Groups): boolean =>
 const Group = ({ id, children }: { id: string; children: ReactNode }) => {
   const drop = useDroppable ({ id: `group:${id}` })
   return <div ref={drop.setNodeRef} className={cn (
-      'flex min-h-10 flex-wrap items-start gap-1 rounded p-1',
+      'min-w-0 rounded',
       drop.isOver && 'ring-1 ring-blue-500 dark:ring-blue-400')}>{children}</div>
 }
 
@@ -86,7 +87,12 @@ const SortableList = (
     drag.current = null
     setActive (null)
   }
-  return <DndContext sensors={sensors} collisionDetection={closestCenter}
+  return <DndContext sensors={sensors} collisionDetection={args => {
+      const hits = pointerWithin (args)
+      const available = hits.find (hit => hit.id === 'group:available')
+      return owner (String (args.active.id), groups) !== 'available'
+          && available != null ? [available] : closestCenter (args)
+    }}
       accessibility={{ announcements: {
           onDragStart: event => accessibleName (String (event.active.id)).text,
           onDragOver: event => event.over == null ? undefined : (
@@ -110,15 +116,17 @@ const SortableList = (
       }}>
 
     {/* Keep indexes and droppable geometry stable until the drop is committed. */}
-    {Object.entries (groups).map (([group, ids]) => <div key={group}>
+    {Object.entries (groups).map (([group, ids]) => <Group key={group} id={group}>
       {renderGroup (group, <SortableContext items={ids} strategy={rectSortingStrategy}>
-        <Group id={group}>{ids.map (id => <SortableItem key={id} id={id}
+        <div className="flex min-h-10 flex-wrap items-start gap-1 rounded p-1">
+          {ids.map (id => <SortableItem key={id} id={id}
 	    name={accessibleName (id)} fixed={fixed.includes (id)} handleId={`${scope}-${id}`}
 	    moveGroup={direction => moveGroup (id, direction)}>
           {renderItem (id, group)}
-        </SortableItem>)}</Group>
+          </SortableItem>)}
+        </div>
       </SortableContext>)}
-    </div>)}
+    </Group>)}
     {typeof document !== 'undefined' && createPortal (
 	<DragOverlay adjustScale={false}
 	    style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}