fix(ios): make ordering question drag-and-drop work on iOS Safari

[Ki3mONo]

Problem

The Ordering question relied on the native HTML5 Drag and Drop API
(draggable + onDragStart/Over/End). iOS Safari does not fire these
events for touch input, so reordering was impossible on iPhone/iPad -
touching a tile just scrolled the page.

Fix

Replaced native DnD with @dnd-kit:

• PointerSensor - built on Pointer Events, which iOS Safari
  supports. This is the core fix.
• Grip handle as the drag activator (setActivatorNodeRef +
  touch-none on the handle only) - on touch you drag via the grip,
  while touching the rest of the row still scrolls the list.
• KeyboardSensor - the list can now also be reordered via
  keyboard (a11y bonus).
• Reorder logic moved to arrayMove in onDragEnd.

The onSubmit contract is unchanged - it still returns number[]
(original indices in their new order), so PlayingShell needs no
changes.

Adds deps: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities.

Behavior change

Dragging now starts from the grip handle only (previously the whole
row was draggable). Intentional: it lets touch users scroll the list,
and the grip icon already signals the drag affordance.

Test plan

• eslint --max-warnings=0, prettier, tsc --noEmit pass
• Desktop: drag with mouse, reorder persists, submit sends correct order
• Keyboard: focus grip, reorder with arrow keys
• iOS Safari (real device): drag via grip; list scrolls elsewhere

Summary by CodeRabbit

• New Features
  • Improved drag-and-drop experience for quiz ordering questions with enhanced interaction feedback and stability.

[coderabbitai]

Walkthrough

The Ordering quiz component's drag-and-drop implementation is replaced: manual HTML5 draggable/onDragStart/onDragOver handlers and moveItem helper are removed. Three @dnd-kit packages are added as dependencies, and the component now uses DndContext, SortableContext, and a new SortableRow subcomponent backed by useSortable. The public Ordering prop interface is unchanged.

Changes

@dnd-kit Migration in Ordering Component

Layer / File(s)	Summary
Dependencies and @dnd-kit imports frontend/package.json, frontend/app/components/quiz/questions/Ordering.tsx	Adds @dnd-kit/core, @dnd-kit/sortable, and @dnd-kit/utilities to package.json and imports sensors, context providers, sortable strategy, drag event types, and CSS utilities into Ordering.tsx.
SortableRow subcomponent and Ordering rewrite frontend/app/components/quiz/questions/Ordering.tsx	Defines the OrderedItem type and SortableRow component using useSortable with origIdx as id, drag handle rendering, and active-drag styling. Updates Ordering state to OrderedItem[], removes dragging state and moveItem, adds sensors and handleDragEnd via arrayMove, and wraps the rendered list in DndContext/SortableContext with SortableRow items.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hop, hop, the items glide,
No more dragstart tangled inside!
arrayMove sorts with a snap,
useSortable fills the gap.
closestCenter finds the way —
Drag-and-drop delights today! 🎉

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title describes fixing iOS Safari drag-and-drop for ordering questions, which is the core objective of this PR replacing native HTML5 DnD with @dnd-kit.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hotfix-ios

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[MichalTheProgrammer]

Let's test on prod!