Fix css for status flows

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -142,7 +142,7 @@
   .current-tasks-list {
     align-items: center;
     display: grid;
-    grid-template-columns: auto max-content max-content;
+    grid-template-columns: 1fr max-content max-content;
     padding: 0 1em;
 
     &.disabled {
@@ -157,9 +157,9 @@
       .current-task-breadcrumbs {
         @include font-small;
         color: $color-silver-chalice;
-        grid-column: 1 / span 3;
+        grid-column: span 3;
-        line-height: 14px;
+        line-height: 1em;
-        margin-top: .5em;
+        padding: .5em .5em .25em;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -179,21 +179,19 @@
       }
 
       .task-name {
-        flex-grow: 1;
         font-size: $font-size-base;
         font-weight: bold;
         overflow: hidden;
+        padding: 0 .5em;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .task-due-date {
-        flex-basis: 280px;
-        flex-shrink: 0;
         padding: 0 2em 0 1em;
 
         .fas {
-          padding: 4px;
+          padding: .25em;
         }
 
         &.overdue {
@@ -211,6 +209,7 @@
 
       .task-status-container {
         grid-column: 3;
+        padding: 0 .5em;
         text-align: right;
 
         .task-status {
@@ -222,7 +221,7 @@
         }
       }
 
-      &:hover {
+      &:hover > * {
         background: $color-concrete;
       }
     }
@@ -309,6 +308,7 @@
 
         .current-task-breadcrumbs {
           grid-column: 1;
+          padding-left: 0;
         }
 
         .task-name {
@@ -320,8 +320,10 @@
         .task-due-date {
           @include font-small;
           border: 0;
+          height: 24px;
           padding-left: 0;
 
+
           .fas {
             display: none;
           }
@@ -330,6 +332,7 @@
         .task-status-container {
           grid-column: 1;
           text-align: left;
+          padding-left: 0;
         }
       }
     }

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -506,7 +506,7 @@
 .task-information {
   column-gap: 1em;
   display: grid;
-  grid-template-columns: auto max-content;
+  grid-template-columns: auto minmax(max-content, 18em);
 
   .task-section-header {
     grid-column: 1 / span 1;

app/assets/stylesheets/my_modules/status_flow.scss

@@ -11,15 +11,63 @@
     .dropdown-toggle {
       color: $color-white;
       text-align: left;
-      width: 15em;
+      width: 100%;
 
       .caret {
         margin: 8px 0;
       }
     }
 
-    .dropdown-menu > li {
+    &.open .dropdown-menu{
-      line-height: 35px;
+      align-items: center;
+      display: grid;
+      grid-template-columns: max-content min-content minmax(0, auto);
+      padding: .5em 0;
+
+      li {
+        display: contents;
+
+        > * {
+          cursor: pointer;
+          line-height: 2em;
+          padding: .5em 1em;
+        }
+
+        &:hover > *{
+          background: $color-concrete;
+        }
+      }
+
+      .fa-long-arrow-alt-right {
+        color: $color-silver-chalice;
+        padding: .5em 0;
+      }
+
+      .status-container {
+        display: flex;
+      }
+
+      .status-name {
+        border-radius: $border-radius-tag;
+        color: $color-white;
+        display: inline-block;
+        font-weight: bold;
+        line-height: 1em;
+        max-width: 100%;
+        overflow: hidden;
+        padding: .5em;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+
+      #viewTaskFlow {
+        cursor: pointer;
+        display: list-item;
+        grid-column: span 3;
+        line-height: 2em;
+        padding: .5em 1em;
+      }
     }
   }
 }
@@ -46,6 +94,7 @@
       }
 
       .status-block {
+        @include font-button;
         border-radius: $border-radius-tag;
         color: $color-white;
         font-weight: bold;

app/assets/stylesheets/projects.scss

@@ -237,6 +237,7 @@ path, ._jsPlumb_endpoint {
 
   .panel-body .due-date-link {
     color: $color-emperor;
+    display: block;
   }
 
   .panel-body .due-date-label {

app/assets/stylesheets/themes/scinote.scss

@@ -761,13 +761,13 @@ ul.double-line > li {
     .status-label {
       background-color: var(--state-color);
       color: $color-white;
+      display: inline-block;
       margin: 3px 0;
       max-width: 100%;
       overflow: hidden;
       padding: 2px 8px;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: fit-content;
     }
   }
 

app/views/my_modules/modals/_status_flow_modal.html.erb

@@ -3,7 +3,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h2 class="modal-title"><%= t('my_modules.modals.status_flow_modal.title', status_flow: @my_module.my_module_status_flow.name) %></h2>
+        <h2 class="modal-title"><%= t('my_modules.modals.status_flow_modal.title') %></h2>
       </div>
       <div class="modal-body"></div>
       <div class="modal-footer">

app/views/my_modules/status_flow/_task_flow_button.html.erb

@@ -14,14 +14,22 @@
     <% unless status.initial_status? %>
       <% previous_s = status.previous_status %>
       <li data-state-id="<%= previous_s.id %>">
-        <span><%= t 'my_module_statuses.dropdown.return_label' %></span> <span style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></span>
+        <span><%= t('my_module_statuses.dropdown.return_label') %></span>
+        <i class="fas fa-long-arrow-alt-right"></i>
+        <div class=" status-container">
+          <div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
+        </div>
       </li>
     <% end %>
 
     <% unless status.final_status? %>
       <% next_s = status.next_status %>
       <li data-state-id="<%= next_s.id %>">
-        <span><%= t('my_module_statuses.dropdown.move_label') %></span> <span style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></span>
+        <span><%= t('my_module_statuses.dropdown.move_label') %></span>
+        <i class="fas fa-long-arrow-alt-right"></i>
+        <div class="status-container">
+          <div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
+        </div>
       </li>
     <% end %>
     <li id="viewTaskFlow">

config/locales/en.yml

@@ -840,7 +840,7 @@ en:
         update_error: "There was an error in updating your item(s)."
     modals:
       status_flow_modal:
-        title: "Task status flow: %{status_flow}"
+        title: "Task status flow"
         current_status: "Current status"
         done: "Done"
       update_repository_record:

config/locales/my_module_statuses/en.yml

@@ -2,8 +2,8 @@ en:
   my_module_statuses:
     dropdown:
       status_label: Status
-      move_label: Move to ->
+      move_label: Move to
-      return_label: Return to ->
+      return_label: Return to
       view_flow_label: View task flow
     update_status:
       error: