#434

frontend/src/components/common/SortableColumns.tsx

@@ -2,7 +2,7 @@ import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
          closestCenter, useSensor, useSensors } from '@dnd-kit/core'
 import { SortableContext, arrayMove, horizontalListSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -16,6 +16,7 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     onChange: (ids: string[]) => void; children: (ids: string[]) => ReactNode },
 ) => {
   const [mounted, setMounted] = useState (false)
+  const scope = useId ()
   useEffect (() => setMounted (true), [])
   const [active, setActive] = useState<string | null> (null)
   const drag = useRef<{ id: string; ids: string[] } | null> (null)
@@ -35,7 +36,7 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     drag.current = null
     setActive (null)
   }
-  return <DndContext sensors={sensors} collisionDetection={closestCenter}
+  return <DndContext id={scope} sensors={sensors} collisionDetection={closestCenter}
       accessibility={{ announcements: {
           onDragStart: event => name (String (event.active.id)).text,
           onDragOver: event => event.over == null ? undefined : name (String (event.over.id)).text,

frontend/src/components/common/SortableList.tsx

@@ -92,6 +92,7 @@ const SortableList = (
   }
   return (
       <DndContext
+	  id={scope}
 	  sensors={sensors}
 	  collisionDetection={args => {
 	    const hits = pointerWithin (args)