Making cards clickable in Ranking replies page (#1386)

* Make sortable clickable

* remove forgotten bg

* Make cypress test click on the left of a card

* resolve conflicts

* show 3 dots instead of 4 when shortened text ends with .

* Remove unneeded check

website/cypress/e2e/tasks/random.cy.ts

@@ -30,7 +30,7 @@ describe("handles random tasks", () => {
                 // Rank an item using the keyboard so that the submit button is enabled
                 cy.get('[aria-roledescription="sortable"]')
                   .first()
-                  .click()
+                  .click("left")
                   .type("{enter}")
                   .wait(100)
                   .type("{downArrow}")

website/src/components/CollapsableText.tsx

@@ -1,72 +1,10 @@
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Tooltip,
-  useColorModeValue,
-  useDisclosure,
-} from "@chakra-ui/react";
-import React, { ReactNode } from "react";
-
-const killEvent = (e) => e.stopPropagation();
-
-export const CollapsableText = ({
-  text,
-  maxLength = 220,
-  isDisabled,
-}: {
-  text: ReactNode;
-  maxLength?: number;
-  isDisabled?: boolean;
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const finalRef = React.useRef(null);
-
-  const moreButtonColor = useColorModeValue("gray.600", "gray.400");
+import { ReactNode } from "react";
 
+export const CollapsableText = ({ text, maxLength = 220 }: { text: ReactNode; maxLength?: number }) => {
   if (typeof text !== "string" || text.length <= maxLength) {
     return <>{text}</>;
   } else {
-    return (
-      <>
-        <span ref={finalRef}>
-          {text.substring(0, maxLength - 3)}&nbsp;
-          <Tooltip label={text} maxW="70vw">
-            <Button
-              style={{ display: "inline" }}
-              size={"xs"}
-              variant={"solid"}
-              bg={moreButtonColor}
-              color={"white"}
-              isDisabled={isDisabled}
-              onClick={onOpen}
-            >
-              ...
-            </Button>
-          </Tooltip>
-        </span>
-        <Modal
-          finalFocusRef={finalRef}
-          isOpen={isOpen}
-          onClose={onClose}
-          size="xl"
-          scrollBehavior={"inside"}
-          isCentered
-        >
-          {/* we kill the event here to disable drag and drop, since it is in the same container */}
-          <ModalOverlay onMouseDown={killEvent}>
-            <ModalContent pb={5} alignItems="center">
-              <ModalHeader>Full Text</ModalHeader>
-              <ModalCloseButton />
-              <ModalBody whiteSpace="pre-line">{text}</ModalBody>
-            </ModalContent>
-          </ModalOverlay>
-        </Modal>
-      </>
-    );
+    const visibleText = text.substring(0, maxLength - 3);
+    return <span>{visibleText}...</span>;
   }
 };

website/src/components/Sortable/Sortable.tsx

@@ -1,10 +1,19 @@
-import { Flex } from "@chakra-ui/react";
+import {
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
 import {
   closestCenter,
   DndContext,
   KeyboardSensor,
   MouseSensor,
-  TouchSensor,
+  PointerSensor,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
@@ -37,7 +46,7 @@ interface SortableItems {
 
 export const Sortable = (props: SortableProps) => {
   const [itemsWithIds, setItemsWithIds] = useState<SortableItems[]>([]);
-
+  const [modalText, setModalText] = useState(null);
   useEffect(() => {
     setItemsWithIds(
       props.items.map((item, idx) => ({
@@ -49,30 +58,63 @@ export const Sortable = (props: SortableProps) => {
   }, [props.items]);
 
   const sensors = useSensors(
-    useSensor(MouseSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(TouchSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8, tolerance: 100 },
+    }),
+    useSensor(MouseSensor, { activationConstraint: { distance: 10 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
   );
-
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const extraClasses = props.className || "";
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd}
-      modifiers={[restrictToParentElement, restrictToVerticalAxis]}
-    >
-      <SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
-        <Flex direction="column" gap={2} className={extraClasses}>
-          {itemsWithIds.map(({ id, item }, index) => (
-            <SortableItem key={id} id={id} index={index} isEditable={props.isEditable} isDisabled={props.isDisabled}>
-              <CollapsableText text={item} isDisabled={props.isDisabled} />
-            </SortableItem>
-          ))}
-        </Flex>
-      </SortableContext>
-    </DndContext>
+    <>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+        modifiers={[restrictToParentElement, restrictToVerticalAxis]}
+      >
+        <SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
+          <Flex direction="column" gap={2} className={extraClasses}>
+            {itemsWithIds.map(({ id, item }, index) => (
+              <SortableItem key={id} id={id} index={index} isEditable={props.isEditable} isDisabled={props.isDisabled}>
+                <button
+                  className="w-full text-left"
+                  aria-label="show full text"
+                  onClick={() => {
+                    setModalText(item);
+                    onOpen();
+                  }}
+                >
+                  <CollapsableText text={item} />
+                </button>
+              </SortableItem>
+            ))}
+          </Flex>
+        </SortableContext>
+      </DndContext>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => {
+          setModalText(null);
+          onClose();
+        }}
+        size="xl"
+        scrollBehavior={"inside"}
+        isCentered
+      >
+        <ModalOverlay>
+          <ModalContent pb={5} alignItems="center">
+            <ModalHeader>Full Text</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody whiteSpace="pre-line">{modalText}</ModalBody>
+          </ModalContent>
+        </ModalOverlay>
+      </Modal>
+    </>
   );
 
   function handleDragEnd(event: DragEndEvent) {