[skip ci] refactor to use buttons instead of a

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/multiple_assignees.js

@@ -29,13 +29,13 @@ export default {
     <div class="sidebar-collapsed-icon sidebar-collapsed-user multiple-users"
           data-container="body" data-placement="left"
           data-toggle="tooltip" title="" :data-original-title="title">
-      <a class="author_link" :href="'/' + users[0].username">
+      <button class="btn-link" type="button">
         <img width="24" class="avatar avatar-inline s24 " alt="" :src="users[0].avatarUrl">
         <span class="author">{{users[0].name}}</span>
-      </a>
-      <a class="author_link" href='#'>
+      </button>
+      <button class="btn-link" type="button">
         <span class="avatar-counter sidebar-avatar-counter">{{counter}}</span>
-      </a>
+      </button>
     </div>
   `,
 };

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/single_assignee.js

@@ -7,10 +7,10 @@ export default {
     <div class="sidebar-collapsed-icon sidebar-collapsed-user"
           data-container="body" data-placement="left"
           data-toggle="tooltip" title="" :data-original-title="users[0].name">
-      <a class="author_link" :href="'/' + users[0].username">
+      <button class="btn-link" type="button">
         <img width="24" class="avatar avatar-inline s24 " alt="" :src="users[0].avatarUrl">
         <span class="author">{{users[0].name}}</span>
-      </a>
+      </button>
     </div>
   `,
 };

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/two_assignees.js

@@ -12,14 +12,14 @@ export default {
     <div class="sidebar-collapsed-icon sidebar-collapsed-user multiple-users"
           data-container="body" data-placement="left"
           data-toggle="tooltip" title="" :data-original-title="title">
-      <a class="author_link" :href="'/' + users[0].username">
+      <button class="btn-link" type="button">
         <img width="24" class="avatar avatar-inline s24 " alt="" :src="users[0].avatarUrl">
         <span class="author">{{users[0].name}}</span>
-      </a>
-      <a class="author_link" :href="'/' + users[1].username">
+      </button>
+      <button class="btn-link" type="button">
         <img width="24" class="avatar avatar-inline s24 " alt="" :src="users[1].avatarUrl">
         <span class="author">{{users[1].name}}</span>
-      </a>
+      </button>
     </div>
   `,
 };

app/assets/stylesheets/pages/issuable.scss

@@ -332,18 +332,15 @@
 
       &.multiple-users {
         display: flex;
+        justify-content: center;
       }
     }
 
     .sidebar-avatar-counter {
-      width: 25px;
-      height: 25px;
+      width: 24px;
+      height: 24px;
       border-radius: 12px;
-      line-height: 2.5em;
-      z-index: 1;
-      position: relative;
-      top: -1px;
-      left: -2px;
+      line-height: 24px;
     }
 
     .sidebar-collapsed-user {
@@ -356,19 +353,26 @@
     }
 
     .multiple-users {
-      .author_link:first-child {
-        z-index: 2;
+      .btn-link {
+        padding: 0;
+        border: 0;
 
         .avatar {
-          margin-left: 6px;
-          margin-right: 0;
-          transform: translateX(2px);
+          margin: 0;
         }
       }
 
-      .author_link .avatar {
-        margin-left: 0;
-        transform: translateX(-2px);
+      .btn-link:first-child {
+        z-index: 1;
+        transform: translateX(3px);
+      }
+
+      .btn-link:last-child {
+        transform: translateX(-3px);
+
+        &:hover {
+          text-decoration: none;
+        }
       }
     }
   }