Merge pull request #4799 from aignatov-bio/ai-sci-7708-fix-long-task-names-in-experiment-table

Fix long task names in experiment table [SCI-7708]

app/assets/javascripts/experiments/table.js

@@ -614,11 +614,17 @@ var ExperimnetTable = {
 };
 
 ExperimnetTable.render.task_name = function(data) {
+  let tooltip = ` title="${data.name}" data-toggle="tooltip" data-placement="bottom"`;
   if (data.provisioning_status === 'in_progress') {
-    return `<span data-full-name="${data.name}">${data.name}</span>`;
+    return `<span data-full-name="${data.name}" ${tooltip}>${data.name}</span>`;
   }
 
-  return `<a href="${data.url}" id="taskName${data.id}" data-full-name="${data.name}">${data.name}</a>`;
+  return `<a
+    href="${data.url}"
+    ${tooltip}
+    title="${data.name}"
+    id="taskName${data.id}"
+    data-full-name="${data.name}">${data.name}</a>`;
 };
 
 ExperimnetTable.render.id = function(data) {

app/assets/stylesheets/experiment/table.scss

@@ -409,10 +409,20 @@
       display: flex;
     }
   }
-}
 
-.task_name-column span {
-  color: $color-silver-chalice;
+  .task_name-column {
+    a {
+      display: inline-block;
+      max-width: 320px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    span {
+      color: $color-silver-chalice;
+    }
+  }
 }
 
 .table-display-modal {

app/assets/stylesheets/themes/scinote.scss

@@ -201,16 +201,6 @@ mark,.mark {
   text-align: right;
 }
 
-a[data-toggle="tooltip"] {
-  color: inherit;
-  border-bottom: 1px dashed $color-emperor;
-
-  &:hover {
-    text-decoration: none;
-    cursor: help;
-  }
-}
-
 .nav-tabs {
   margin-bottom: 15px;