From b3b6827a898a2db80876abaad92f584ec94fd306 Mon Sep 17 00:00:00 2001
From: Ryan Chen <ryan@torrtle.co>
Date: Fri, 3 Apr 2026 13:26:58 -0400
Subject: [PATCH] Restrict drag-and-drop to within the game queue bounds

Add @dnd-kit/modifiers restrictToParentElement so dragged questions
stay clamped inside the queue container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/frontend/package-lock.json               | 15 +++++++++++++++
 frontend/frontend/package.json                    |  1 +
 .../src/components/questionbank/GameSetupView.tsx |  2 ++
 3 files changed, 18 insertions(+)

diff --git a/frontend/frontend/package-lock.json b/frontend/frontend/package-lock.json
index ff7df1a..9854efb 100644
--- a/frontend/frontend/package-lock.json
+++ b/frontend/frontend/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@base-ui/react": "^1.3.0",
 				"@dnd-kit/core": "^6.3.1",
+				"@dnd-kit/modifiers": "^9.0.0",
 				"@dnd-kit/sortable": "^10.0.0",
 				"@dnd-kit/utilities": "^3.2.2",
 				"@fontsource-variable/geist": "^5.2.8",
@@ -734,6 +735,20 @@
 				"react-dom": ">=16.8.0"
 			}
 		},
+		"node_modules/@dnd-kit/modifiers": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+			"integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+			"license": "MIT",
+			"dependencies": {
+				"@dnd-kit/utilities": "^3.2.2",
+				"tslib": "^2.0.0"
+			},
+			"peerDependencies": {
+				"@dnd-kit/core": "^6.3.0",
+				"react": ">=16.8.0"
+			}
+		},
 		"node_modules/@dnd-kit/sortable": {
 			"version": "10.0.0",
 			"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
diff --git a/frontend/frontend/package.json b/frontend/frontend/package.json
index b6e2d0a..40bde63 100644
--- a/frontend/frontend/package.json
+++ b/frontend/frontend/package.json
@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@base-ui/react": "^1.3.0",
 		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
 		"@fontsource-variable/geist": "^5.2.8",
diff --git a/frontend/frontend/src/components/questionbank/GameSetupView.tsx b/frontend/frontend/src/components/questionbank/GameSetupView.tsx
index e1b30b9..ca8a82f 100644
--- a/frontend/frontend/src/components/questionbank/GameSetupView.tsx
+++ b/frontend/frontend/src/components/questionbank/GameSetupView.tsx
@@ -17,6 +17,7 @@ import {
 	verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { questionsAPI, gamesAPI, teamsAPI } from "../../services/api";
 import AdminNavbar from "../common/AdminNavbar";
@@ -896,6 +897,7 @@ export default function GameSetupView() {
 									sensors={sensors}
 									collisionDetection={closestCenter}
 									onDragEnd={handleDragEnd}
+									modifiers={[restrictToParentElement]}
 								>
 									<SortableContext
 										items={selectedQuestions}