Fixed issue with scrolling on ranking page on mobile (#141)

hackutd · Sep 11, 2024 · e1733e4 · e1733e4
1 parent ea73aa2
commit e1733e4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/client/src/components/judge/dnd/DragHamburger.tsx b/client/src/components/judge/dnd/DragHamburger.tsx
@@ -1,6 +1,6 @@
 const DragHamburger = () => {
     return (
-        <div className="drag-handle p-2 cursor-grab">
+        <div className="drag-handle p-2 cursor-grab touch-none">
             <svg
                 width="28"
                 height="25"

diff --git a/client/src/components/judge/dnd/SortableItem.tsx b/client/src/components/judge/dnd/SortableItem.tsx
@@ -19,6 +19,7 @@ const SortableItem = (props: SortableItemProps) => {
     const style = {
         transform: CSS.Transform.toString(transform),
         transition,
+        touchAction: 'initial',
     };
 
     return (

diff --git a/client/src/pages/judge/index.tsx b/client/src/pages/judge/index.tsx
@@ -261,6 +261,9 @@ const Judge = () => {
                     onDragEnd={handleDragEnd}
                 >
                     <h2 className="text-primary text-xl font-bold mt-4">Ranked Projects</h2>
+                    <p className="text-light text-sm">
+                        Click on titles to edit scores and see details.
+                    </p>
                     <div className="h-[1px] w-full bg-light my-2"></div>
                     <Droppable id="ranked" projects={ranked} active={activeDropzone} />