Fix invisible unread marker issue

(imported from commit a1cc8465758b7e9daf110a32038feeeef0427715)

static/styles/zulip.css

@@ -968,18 +968,19 @@ just a temporary hack.
     position: relative;
 }
 
-.messagebox .unread_marker {
+.unread_marker {
     display: block;
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 16px;
     background: #2b8213;
-    left: -31px;
-    margin-top: 6px;
-    opacity: 0;
+    left: -16px;
+    top: 50%;
+    margin-top: -6px;
     box-shadow: inset 1px 1px 1px -1px #000;
     border: 1px solid #fff;
+    opacity: 0;
 }
 
 .messagebox .unread_marker.slow_fade {
@@ -1163,6 +1164,10 @@ div.message_table {
     width: 100%;
 }
 
+.message_row {
+    position: relative;
+}
+
 table.compose_table {
     table-layout: fixed;
     margin-left: auto;

static/templates/message.handlebars

@@ -168,13 +168,12 @@
 {{/include_recipient}}
 <div zid="{{id}}" id="{{dom_id}}"
     class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row">
-
+    <div class="unread_marker"></div>
     <div class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
       <div class="messagebox-border" style="box-shadow:inset 9px 0px {{background_color}};">
         <div class="messagebox-content">
           <span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
           <div class="message_top_line">
-            <div class="unread_marker"></div>
             {{#include_sender}}
             <span class="message_sender{{^status_message}} sender_info_hover{{/status_message}}">
               {{! See ../js/notifications.js for another user of avatar_url. }}