#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 { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -15,6 +15,8 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     ids: string[]; fixed?: string[]; name: (id: string) => { text: string; language: string }
     onChange: (ids: string[]) => void; children: (ids: string[]) => ReactNode },
 ) => {
+  const [mounted, setMounted] = useState (false)
+  useEffect (() => setMounted (true), [])
   const [active, setActive] = useState<string | null> (null)
   const drag = useRef<{ id: string; ids: string[] } | null> (null)
   const motion = useClientMotion ()
@@ -56,7 +58,7 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     <SortableContext items={ids} strategy={horizontalListSortingStrategy}>
       {children (ids)}
     </SortableContext>
-    {typeof document !== 'undefined' && createPortal (<DragOverlay adjustScale={false}
+    {mounted && typeof document !== 'undefined' && createPortal (<DragOverlay adjustScale={false}
 	style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}
         dropAnimation={motion.reduced ? null : {
 	    duration: motion.duration ('drop'), easing: motion.easing,

frontend/src/components/common/SortableList.tsx

@@ -3,7 +3,7 @@ import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
     from '@dnd-kit/core'
 import { SortableContext, arrayMove, rectSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
-import { useId, useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -38,6 +38,8 @@ const SortableList = (
 	renderGroup: (id: string, content: ReactNode, over: boolean) => ReactNode
 	onChange: (groups: Groups) => void; fixed?: string[] },
 ) => {
+  const [mounted, setMounted] = useState (false)
+  useEffect (() => setMounted (true), [])
   const drag = useRef<{ id: string; groups: Groups } | null> (null)
   const scope = useId ()
   const [active, setActive] = useState<string | null> (null)
@@ -139,7 +141,7 @@ const SortableList = (
 	    </div>
 	  </SortableContext>, overGroup === group)}
 	</Group>)}
-	{typeof document !== 'undefined' && createPortal (
+	{mounted && typeof document !== 'undefined' && createPortal (
 	    <DragOverlay adjustScale={false}
 		style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}
 		dropAnimation={motion.reduced ? null : {