Merge pull request #303 from kostiak/collapsable-text

Added collapsable text for text that's too long

website/src/components/CollapsableText.tsx

@@ -0,0 +1,28 @@
+import { Button, useDisclosure } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
+import React from "react";
+
+export const CollapsableText = ({ text, maxLength = 220 }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  if (typeof text != "string" || text.length <= maxLength) {
+    return text;
+  } else {
+    return (
+      <>
+        {text.substring(0, maxLength - 3)}
+        <Button style={{ display: "contents" }} onClick={onOpen}>
+          ...
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
+          <ModalOverlay style={{ width: "100%", height: "100%" }}>
+            <ModalContent maxH="400">
+              <ModalHeader>Full Text</ModalHeader>
+              <ModalCloseButton />
+              <ModalBody>{text}</ModalBody>
+            </ModalContent>
+          </ModalOverlay>
+        </Modal>
+      </>
+    );
+  }
+};

website/src/components/Sortable/Sortable.tsx

@@ -17,6 +17,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { ReactNode, useEffect, useState } from "react";
+import { CollapsableText } from "../CollapsableText";
 
 import { SortableItem } from "./SortableItem";
 
@@ -64,7 +65,7 @@ export const Sortable = (props: SortableProps) => {
         <Flex direction="column" gap={2} className={extraClasses}>
           {itemsWithIds.map(({ id, item }) => (
             <SortableItem key={id} id={id}>
-              {item}
+              <CollapsableText text={item} />
             </SortableItem>
           ))}
         </Flex>