#434

frontend/src/components/common/SortableColumns.tsx

@@ -4,6 +4,7 @@ import { SortableContext, arrayMove, horizontalListSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import { useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { CSS } from '@dnd-kit/utilities'
 
 import { useClientMotion } from '@/lib/useClientMotion'
 
@@ -55,11 +56,16 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     <SortableContext items={ids} strategy={horizontalListSortingStrategy}>
       {children (ids)}
     </SortableContext>
-    {typeof document !== 'undefined' && createPortal (<DragOverlay
+    {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 }}>
+	    duration: motion.duration ('drop'), easing: motion.easing,
+	    keyframes: ({ transform }) => [
+		{ transform: CSS.Translate.toString (transform.initial) },
+		{ transform: CSS.Translate.toString (transform.final) }] }}>
       {active != null && <div lang={name (active).language}
-          className="rounded border border-blue-500 bg-white p-2 text-slate-900 shadow-lg
+          className="w-max max-w-[min(20rem,calc(100vw_-_2rem))] truncate rounded
+          border border-blue-500 bg-white px-2 py-1 text-sm text-slate-900 shadow-lg
           dark:border-blue-400 dark:bg-slate-800 dark:text-slate-100">{name (active).text}</div>}
     </DragOverlay>, document.body)}
   </DndContext>