website: Restrict ranking items to vertical motion to avoid breaking the webpage layout.

When the items are drag-able outside the page boundary the viewport leaves the page boundary. This looks particularly unprofessionally on mobile. There is also another option to restrict to the page boundaries (restrictToWindowEdges) which might be better but it doesn't appear to work on mobile (firefox); the issue is that the items get stuck slightly off to the left edge of the viewport and can't be moved horizontally at all (even without restrictToVerticalAxis).

website/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@chakra-ui/react": "^2.4.4",
         "@dnd-kit/core": "^6.0.6",
+        "@dnd-kit/modifiers": "^6.0.1",
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
@@ -3356,6 +3357,19 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz",
+      "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.6",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/sortable": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.1.tgz",
@@ -30905,6 +30919,15 @@
         "tslib": "^2.0.0"
       }
     },
+    "@dnd-kit/modifiers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz",
+      "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==",
+      "requires": {
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
     "@dnd-kit/sortable": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.1.tgz",

website/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@chakra-ui/react": "^2.4.4",
     "@dnd-kit/core": "^6.0.6",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",

website/src/components/Sortable/Sortable.tsx

@@ -2,6 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { closestCenter, DndContext, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
 import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { ReactNode, useEffect, useState } from "react";
 
 import { SortableItem } from "./SortableItem";
@@ -33,7 +34,12 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
   const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor));
 
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+      modifiers={[restrictToVerticalAxis]}
+    >
       <SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
         <Flex direction="column" gap={2}>
           {itemsWithIds.map(({ id, item }) => (