Move mobile indicator to the right and style it properly

(imported from commit 19f6bd27b30c355c1720d43580f5b6ff6c1c0b4a)

static/styles/zulip.css

@@ -445,15 +445,17 @@ a:hover code {
 }
 
 .user-device-indicator {
-    display: block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    float: left;
-    position: relative;
-    top: 5px;
-    margin-right: 0.5em;
-    content: "";
+    display: inline-block;
+    font-size: 20px;
+    line-height: 0px;
+    position: absolute;
+    right: 12px;
+    top: 0px;
+    color: #777777;
+}
+
+.user-with-count .user-device-indicator {
+    right: 35px;
 }
 
 #user_presences a, #group-pms a {
@@ -513,12 +515,20 @@ ul.filters {
     font-size: 14px;
 }
 
-.user_sidebar_entry .selectable_sidebar_block,
 .group-pms-sidebar-entry .selectable_sidebar_block {
     width: 235px;
     display: block;
 }
 
+.user_sidebar_entry .selectable_sidebar_block {
+    width: 218px;
+    display: block;
+}
+
+.user_sidebar_entry .selectable_sidebar_block.user-with-mobile {
+    width: 204px;
+}
+
 .group-pm-link {
     margin-left: 17px;
     display: block;
@@ -531,7 +541,11 @@ ul.filters {
 }
 
 .user_sidebar_entry.user-with-count .selectable_sidebar_block {
-    width: 150px;
+    width: 200px;
+}
+
+.user_sidebar_entry.user-with-count .selectable_sidebar_block.user-with-mobile {
+    width: 180px;
 }
 
 .user_sidebar_entry.user-with-count .count {
@@ -573,7 +587,7 @@ ul.filters {
 #global_filters .count
 {
     line-height: 13px;
-    top: 3px;
+    top: 2px;
 }
 
 .subject_count {

static/templates/user_presence_rows.handlebars

@@ -1,9 +1,9 @@
 {{! User Presence rows }}
 {{#each users}}
 <li data-email="{{email}}" class="user_sidebar_entry {{#if num_unread}}user-with-count {{/if}}narrow-filter user_{{type}}">
-  <span class="selectable_sidebar_block">
+  <span class="selectable_sidebar_block{{#if mobile}} user-with-mobile{{/if}}">
     <span class="user-status-indicator"></span>
-    <span class="user-device-indicator{{#if mobile}} icon-vector-mobile{{/if}}"></span>
+    <span class="user-device-indicator">{{#if mobile}}<i class="icon-vector-mobile"></i>{{/if}}</span>
       <a href="#" data-email="{{email}}" data-name="{{name}}" title="{{name}} {{type_desc}}"
          class="{{#if my_fullname}} my_fullname{{/if}}">{{name}}</a>
   </span>