From 64a7b9848a9ba1f9046906aa644f05fa4369f366 Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sun, 1 Jan 2023 15:56:20 +1100
Subject: [PATCH] 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                    | 23 ++++++++++++++++++++
 website/package.json                         |  1 +
 website/src/components/Sortable/Sortable.tsx |  8 ++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 9bc7cde1..1587c01e 100644
--- a/website/package-lock.json
+++ b/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",
diff --git a/website/package.json b/website/package.json
index c7532955..bc1f3b69 100644
--- a/website/package.json
+++ b/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",
diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
index 74ff1bb2..7ca761df 100644
--- a/website/src/components/Sortable/Sortable.tsx
+++ b/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 }) => (