81 final catalog adjustments frontend (#88)

* locked catalog col width to 20vw (prev max width) * fixed a bug with host col --------- Co-authored-by: michellelin1 <[email protected]>
ctc-uci · Apr 30, 2024 · f9581f0 · f9581f0
1 parent 54542b4
commit f9581f0
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/Catalog/CatalogTable.jsx b/src/components/Catalog/CatalogTable.jsx
@@ -20,23 +20,23 @@ const CatalogTable = ({ tableData, handleActionClick, onDayPlanner, setCurrEvent
     >
       <Thead style={onDayPlanner ? { position: 'sticky', top: 0, backgroundColor: 'white', zIndex: 1 } : {}}>
         <Tr>
-          <Th textAlign="left">Event</Th>
-          <Th textAlign="left">Host</Th>
-          <Th textAlign="left">Tags</Th>
+          <Th width="19vw" maxWidth="19vw" textAlign="left">Event</Th>
+          <Th width="19vw" maxWidth="19vw" textAlign="left">Host</Th>
+          <Th width="19vw" maxWidth="19vw" textAlign="left">Tags</Th>
           <Th width="8rem"></Th>
         </Tr>
       </Thead>
       <Tbody>
         {tableData.map(({ id, host, title, eventType, subject, year, season, description}) => (
           <Tr key={id}>
             <Td textAlign="left" py="1.5rem" color="#2D3748">
-              <Text mb="0.5rem" fontWeight="700">{title}</Text>
-              <Text maxW="20vw" whiteSpace="pre-wrap">{description}</Text>
+              <Text width="19vw" maxW="19vw" mb="0.5rem" fontWeight="700" whiteSpace="pre-wrap" overflowWrap="break-word">{title}</Text>
+              <Text width="19vw" maxW="19vw" whiteSpace="pre-wrap" overflowWrap="break-word">{description}</Text>
             </Td>
-            <Td textAlign="left" py="1.5rem">
+            <Td width="19vw" textAlign="left" py="1.5rem" maxW="19vw" whiteSpace="pre-wrap" overflowWrap="break-word">
               {host}
             </Td>
-            <Td textAlign="left" py="1.5rem">
+            <Td width="19vw" maxW="19vw" textAlign="left" py="1.5rem">
               <Container p="0" m="0" maxW="16rem" display="flex" flexWrap="wrap" gap="0.375rem">
                 {season[0] !== '' && season.map((seasonItem, index) => (
                   <Badge