Merge pull request #2613 from hackforla/2586-truncate-cells

2586 truncate cells

Author: Tony-Villa

client/src/components/Projects/ProjectTableRow.jsx

@@ -296,8 +296,8 @@ const ProjectTableRow = ({
         <Link to={`/calculation/1/${project.id}`}>{project.name}</Link>
       </TdExpandable>
       <TdExpandable>{project.address}</TdExpandable>
-      <Td>{fallbackToBlank(formInputs.VERSION_NO)}</Td>
-      <Td> {`${project.lastName}, ${project.firstName}`}</Td>
+      <TdExpandable>{fallbackToBlank(formInputs.VERSION_NO)}</TdExpandable>
+      <TdExpandable>{`${project.lastName}, ${project.firstName}`}</TdExpandable>
       <Td>{formatDate(project.dateCreated)}</Td>
       <Td>
         <span>{formatDate(project.dateModified)}</span>

client/src/components/Submissions/SubmissionTableRow.jsx

@@ -140,7 +140,7 @@ const SubmissionTableRow = ({
       <Td>{project.author}</Td>
       <Td align="center">{project.projectLevel}</Td>
       <Td>{project.droName}</Td>
-      <Td>{project.assignee}</Td>
+      <TdExpandable>{project.assignee}</TdExpandable>
       <Td>{formatDate(project.dateAssigned)}</Td>
       <Td>{project.invoiceStatusName}</Td>
       <Td>{formatDate(project.dateInvoicePaid)}</Td>

client/src/components/Submissions/SubmissionsPage.jsx

@@ -568,7 +568,7 @@ const SubmissionsPage = ({ contentContainerRef }) => {
                         <Td>{formatDate(project.dateStatus)}</Td>
                         <Td align="center">{project.projectLevel}</Td>
                         <Td>{project.droName}</Td>
-                        <Td>{project.assignee}</Td>
+                        <TdExpandable>{project.assignee}</TdExpandable>
                         <Td>{formatDate(project.dateAssigned)}</Td>
                         <Td>{project.invoiceStatusName}</Td>
                         <Td>{formatDate(project.dateInvoicePaid)}</Td>

client/src/components/UI/TableData.jsx

@@ -30,7 +30,9 @@ const useStyles = createUseStyles({
     whiteSpace: "normal",
     overflow: "visible",
     textOverflow: "unset",
-    verticalAlign: "middle"
+    verticalAlign: "middle",
+    overflowWrap: "anywhere",
+    hyphens: "auto"
   },
   contentContainer: {
     display: "flex",