truncate and show ellipsis for content outside of cell bounds

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -52,25 +52,13 @@ const StudyListTableRow = props => {
                           whiteSpace: 'nowrap',
                         }}
                       >
-                        <div
+                        {index === 0 && (
-                          className="flex flex-row items-center pl-1"
+                          <Icon
-                          style={{
+                            name={isExpanded ? 'chevron-down' : 'chevron-right'}
-                            width: '100%',
+                            className="mr-4 inline-flex"
-                            overflow: 'hidden',
+                          />
-                            textOverflow: 'ellipsis',
+                        )}
-                            whiteSpace: 'nowrap',
+                        {content}
-                          }}
-                        >
-                          {index === 0 && (
-                            <Icon
-                              name={
-                                isExpanded ? 'chevron-down' : 'chevron-right'
-                              }
-                              className="mr-4"
-                            />
-                          )}
-                          {content}
-                        </div>
                       </td>
                     );
                   })}