Fix overflow for issue tracking feature (#406)

* Fix overflow for issues from issue tracking feature

* try using flex properties

* use truncated class

* add span

amundsen_application/static/js/components/TableDetail/TableIssues/index.tsx

@@ -44,9 +44,11 @@ export class TableIssues extends React.Component<TableIssueProps> {
       <div className="issue-banner" key={`issue-${index}`}>
         <a id={`table-issue-link-${index}`} className="table-issue-link" target="_blank" href={issue.url} onClick={logClick}>
           <img className="icon icon-red-triangle-warning "/>
-          { issue.issue_key }
+          <span>
+            { issue.issue_key }
+          </span>
         </a>
-        <span className="issue-title-display-text">
+        <span className="issue-title-display-text truncated">
           <span className="issue-title-name">
            "{ issue.title }
           </span>"

amundsen_application/static/js/components/TableDetail/TableIssues/styles.scss

@@ -8,6 +8,8 @@
     height: 40px;
     margin: 8px 0;
     padding: 8px 16px;
+    display: flex; 
+    overflow: hidden;
 
     &:first-child {
       margin-top: 24px;
@@ -19,16 +21,16 @@
   }
   .table-issue-link {
     margin: 0px 5px 0px 0px; 
+    min-width: fit-content;
   }
   .issue-title-name {
-    max-width: 390px; 
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display:inline-block;
   }
   .issue-title-display-text {
-    display: inline-flex; 
+    display: flex;
+    max-width: fit-content;
   }
   .table-issue-more-issues {
     margin: 0px 2px 0px 2px;