update notification's classes and add fix for FF flex bug

app/assets/javascripts/app/views/dashboard/activity_stream_item.jst.eco

@@ -1,7 +1,7 @@
-<div class="activity-entry horizontal">
+<div class="activity-entry">
   <div class="activity-avatar js-avatar"></div>
-  <a href="<%- @item.link %>" class="activity-body flex horizontal">
-    <span class="activity-message flex">
+  <a href="<%- @item.link %>" class="activity-body">
+    <span class="activity-message">
       <span class="activity-text">
         <%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
       </span>

app/assets/javascripts/app/views/widget/online_notification.jst.eco

@@ -1,7 +1,7 @@
 <div class="popover popover--notifications js-notificationsContainer" role="tooltip">
   <div class="arrow"></div>
   <div class="popover-notificationsHeader">
-    <span class="popover-title"></span>
+    <div class="popover-title"></div>
     <a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
   </div>
   <div class="popover-content"></div>

app/assets/javascripts/app/views/widget/online_notification_content.jst.eco

@@ -1,15 +1,15 @@
 <% if @items.length: %>
   <% for item in @items: %>
-  <div class="activity-entry horizontal">
+  <div class="activity-entry<% if item.seen: %> is-inactive<% end %>">
     <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
       <%- item.created_by.avatar() %>
     </a>
-    <a href="<%- item.link %>" class="activity-body flex horizontal">
-      <span class="activity-message flex">
-        <span class="activity-text <% if item.seen: %>inactive<% end %>">
+    <a href="<%- item.link %>" class="activity-body">
+      <span class="activity-message">
+        <span class="activity-text">
           <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
         </span>
-        <span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
+        <span class="activity-time humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
       </span>
     </a>
   </div>

app/assets/stylesheets/zammad.css.scss

@@ -642,10 +642,6 @@ table {
   overflow-y: scroll;
 }
 
-.inactive {
-  color: #ddd !important;
-}
-
 /*
 #content > *:not(.active) {
   display: none !important;
@@ -2481,10 +2477,8 @@ footer {
   }
 
   .popover-notificationsHeader {
-    display: flex;
     padding-bottom: 8px;
     margin: 21px 17px 0;
-    @extend .vertical;
 
     .popover-title {
       @extend h1;
@@ -2500,8 +2494,11 @@ footer {
 
   .popover-notificationsMarkRead {
     @extend .btn;
-    @extend .btn--subtle;
+    cursor: pointer;
     padding: 7px 0 0 2px;
+    text-decoration: underline;
+    color: hsl(0,0%,77%);
+    display: block;
 
     &:hover {
       padding: 7px 0 0 2px;
@@ -2727,34 +2724,37 @@ footer {
     margin-right: 26px;
   }
 
-  .activity-entry.state--read {
-    opacity: 0.5;
+  .activity-entry {
+    display: flex;
+    
+    &.is-inactive {
+      opacity: 0.5;
+    }
   }
 
   .activity-avatar {
-    padding-top: 16px;
-    padding-left: 2px;
-    padding-right: 2px;
+    padding: 16px 2px 0;
     margin-right: 10px;
+    flex-shrink: 0;
   }
 
-    .activity-avatar:hover .avatar {
-    }
-
   .activity-body {
     color: #444a4f;
     padding: 16px 0 16px 2px;
     position: relative;
+    display: flex;
+    flex: 1;
+    min-width: 0;
   }
 
-    .activity-body:after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      right: 30px;
-      left: 8px;
-      border-bottom: 1px solid #f2f2f3;
-    }
+  .activity-entry:not(:last-child) .activity-body:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 30px;
+    left: 0;
+    border-bottom: 1px solid #f2f2f3;
+  }
 
   .activity-body:hover {
     color: #444a4f;
@@ -2766,7 +2766,8 @@ footer {
     }
 
   .activity-message {
-    padding-right: 0;
+    flex: 1;
+    min-width: 0;
   }
 
   .activity-time {