fix(artifact-admin) : make talent dnd responsive

components/admin/guide-section-editor.tsx

@@ -29,7 +29,7 @@ import {
 } from "@dnd-kit/core";
 import {
   arrayMove,
-  horizontalListSortingStrategy,
+  rectSortingStrategy,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
@@ -513,7 +513,7 @@ function SortableTalentCard({
     <div
       ref={setNodeRef}
       style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn("w-56 shrink-0", isDragging && "opacity-60")}
+      className={cn("w-full shrink-0 sm:w-56", isDragging && "opacity-60")}
     >
       <Card size="sm" className="h-full">
         <CardHeader className="flex items-center gap-2">
@@ -1640,9 +1640,9 @@ function ArtifactEditor({
               >
                 <SortableContext
                   items={orderedTalents.map((talent) => talent.type)}
-                  strategy={horizontalListSortingStrategy}
+                  strategy={rectSortingStrategy}
                 >
-                  <div className="flex items-start gap-3 overflow-x-auto pb-1">
+                  <div className="flex min-w-0 flex-col items-stretch gap-3 sm:flex-row sm:items-start sm:overflow-x-auto sm:pb-1">
                     {orderedTalents.map((talent, index) => {
                       const catalogTalent = catalogTalents.find(
                         (item) => item.type === talent.type,
@@ -1650,7 +1650,7 @@ function ArtifactEditor({
                       return (
                         <div
                           key={talent.type}
-                          className="flex shrink-0 items-center gap-3"
+                          className="flex w-full shrink-0 flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center"
                         >
                           <SortableTalentCard
                             talent={talent}