From 6319f1ad17688d64b7696362cc1b9a56af828407 Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sun, 1 Jan 2023 15:18:59 +1100
Subject: [PATCH] website: Add drag handles to rank-able (drag-able) items to
 make it clear they can be dragged.

The formatting changes to the SortableItem also had the side-effect of removing the dot points.
---
 website/src/components/Sortable/SortableItem.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx
index 244fc313..c8a93075 100644
--- a/website/src/components/Sortable/SortableItem.tsx
+++ b/website/src/components/Sortable/SortableItem.tsx
@@ -1,6 +1,8 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { RxDragHandleDots2 } from "react-icons/rx";
 import { PropsWithChildren } from "react";
+import { Button } from "@chakra-ui/react";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
@@ -13,12 +15,13 @@ export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>
 
   return (
     <li
-      className="rounded-lg shadow-md p-4 bg-white hover:bg-slate-50"
+      className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 bg-white hover:bg-slate-50"
       ref={setNodeRef}
       style={style}
-      {...attributes}
-      {...listeners}
     >
+      <Button justifyContent="center" variant="ghost" {...attributes} {...listeners}>
+        <RxDragHandleDots2 />
+      </Button>
       {children}
     </li>
   );