Fix threads table overflowing if query text is long

StreetLamb · Aug 25, 2024 · 39dfe04 · 39dfe04
1 parent 232a887
commit 39dfe04
Showing 1 changed file with 2 additions and 5 deletions.
diff --git a/frontend/src/components/Teams/ViewThreads.tsx b/frontend/src/components/Teams/ViewThreads.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   Spinner,
-  Container,
   TableContainer,
   Table,
   Thead,
@@ -84,7 +83,6 @@ const ChatHistory = ({ teamId, updateTabIndex }: ChatHistoryProps) => {
         </Flex>
       ) : (
         threads && (
-          <Container maxW="full">
             <TableContainer>
               <Table size={{ base: "sm", md: "md" }}>
                 <Thead>
@@ -95,7 +93,7 @@ const ChatHistory = ({ teamId, updateTabIndex }: ChatHistoryProps) => {
                     <Th>Actions</Th>
                   </Tr>
                 </Thead>
-                <Tbody>
+                <Tbody width={"2rem"}>
                   {threads.data.map((thread) => (
                     <Tr
                       key={thread.id}
@@ -104,7 +102,7 @@ const ChatHistory = ({ teamId, updateTabIndex }: ChatHistoryProps) => {
                       cursor={"pointer"}
                     >
                       <Td>{new Date(thread.updated_at).toLocaleString()}</Td>
-                      <Td>{thread.query}</Td>
+                      <Td maxW="20rem" overflow="hidden" textOverflow="ellipsis">{thread.query}</Td>
                       <Td>{thread.id}</Td>
                       <Td>
                         <IconButton
@@ -119,7 +117,6 @@ const ChatHistory = ({ teamId, updateTabIndex }: ChatHistoryProps) => {
                 </Tbody>
               </Table>
             </TableContainer>
-          </Container>
         )
       )}
     </>