Added collapsable text for text that's too long

website/src/components/CollapsableText.tsx

@@ -0,0 +1,37 @@
+import { Button, Container, 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>
+                    <Container maxW='full'>
+                        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={'inside'} > 
+                            <ModalOverlay>
+                                <ModalContent maxH="400">
+                                    <ModalHeader>Full Text</ModalHeader>
+                                    <ModalCloseButton />
+                                    <ModalBody>
+                                        {text}
+                                    </ModalBody>
+                                </ModalContent>
+                            </ModalOverlay>
+                        </Modal>
+                    </Container>
+                </>
+            );
+        }
+    }

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";
 
@@ -61,7 +62,7 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
         <Flex direction="column" gap={2}>
           {itemsWithIds.map(({ id, item }) => (
             <SortableItem key={id} id={id}>
-              {item}
+              <CollapsableText text={item} />
             </SortableItem>
           ))}
         </Flex>