diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
new file mode 100644
index 00000000..77792ede
--- /dev/null
+++ b/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>
+                </>
+            );
+        }
+    }
diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
index 615b0853..b8c38932 100644
--- a/website/src/components/Sortable/Sortable.tsx
+++ b/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>
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 017deb3f..109240a0 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -57,6 +57,8 @@ const RankAssistantReplies = () => {
 
   const replies = tasks[0].task.replies as string[];
   const endTask = tasks[tasks.length - 1];
+  // Added for testing purposes, will be removed:
+  replies.push("My test text that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long."); 
   return (
     <>
       <Head>