Small visual improvments for current tasks widget

app/assets/javascripts/dashboard/current_tasks.js

@@ -47,7 +47,7 @@ var DasboardCurrentTasksWidget = (function() {
           }
         }
         currentTaskItem = `<a class="current-task-item" href="${task.link}">
-                             <div class="current-task-breadcrumbs">${task.project}/${task.experiment}</div>
+                             <div class="current-task-breadcrumbs">${task.project}<span class="slash">/</span>${task.experiment}</div>
                              <div class="item-row">
                                <div class="task-name">${task.name}</div>
                                <div class="task-due-date ${overdue}">${dueDate}</div>

app/assets/stylesheets/dashboard/calendar.scss

@@ -80,7 +80,7 @@
             width: 32px;
 
             &:hover {
-              background: $color-alto;
+              background: $color-concrete;
               color: inherit;
             }
           }

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -146,13 +146,22 @@
     .current-task-item {
       border-bottom: $border-tertiary;
       color: $color-volcano;
-      padding: 6px 0;
+      padding: 6px;
       text-decoration: none;
 
       .current-task-breadcrumbs {
         @include font-small;
         color: $color-silver-chalice;
         line-height: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .slash {
+          display: inline-block;
+          text-align: center;
+          width: 16px;
+        }
       }
 
       .item-row {
@@ -160,12 +169,16 @@
 
         .task-name {
           flex-grow: 1;
-          font-size: $font-size-base;  //not in styleguide
+          font-size: $font-size-base;
           font-weight: bold;
+          overflow: hidden;
+          padding-right: 10px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .task-due-date {
-          flex-basis: 260px;
+          flex-basis: 280px;
           flex-shrink: 0;
           font-size: 14px;
 
@@ -178,6 +191,10 @@
           }
         }
       }
+
+      &:hover {
+        background: $color-concrete;
+      }
     }
   }
 
@@ -277,9 +294,32 @@
   }
 }
 
+@media (max-width: 1500px) {
+  .dashboard-container .current-tasks-widget {
+    .task-progress-container {
+      max-width: 200px;
+    }
+  }
+}
+
 @media (max-width: 1250px) {
   .dashboard-container .current-tasks-widget {
     grid-column: 1 / span 8;
+
+    .task-progress-container {
+      max-width: 150px;
+    }
+
+    .current-tasks-list {
+      .current-task-item {
+        .item-row {
+          .task-due-date {
+            flex-basis: 230px;
+          }
+        }
+      }
+    }
+
   }
 }
 
@@ -289,11 +329,3 @@
     grid-row: 1 / span 4;
   }
 }
-
-@media (max-width: 1200px) {
-  .dashboard-container .current-tasks-widget {
-    .task-progress-container {
-      max-width: 180px;
-    }
-  }
-}

app/controllers/dashboard/current_tasks_controller.rb

@@ -46,7 +46,7 @@ module Dashboard
                 experiment: escape_input(task.experiment.name),
                 project: escape_input(task.experiment.project.name),
                 name: escape_input(task.name),
-                due_date: task.due_date.present? ? I18n.l(task.due_date, format: :full_with_comma) : nil,
+                due_date: task.due_date.present? ? I18n.l(task.due_date, format: :full_date) : nil,
                 overdue: task.is_overdue?,
                 state: task.state,
                 steps_state: { completed_steps: task.steps_completed,