Merge branch '6500-fix-misaligned-approvers-dropdown' into 'master'

Fix misaligned approvers dropdown

See merge request gitlab-org/gitlab-ce!22832

3 files changed, 23 insertions, 12 deletions

diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 4b090212d83..ce051582299 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
+/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */
 /* global Issuable */
 /* global emitSidebarEvent */
 
@@ -696,17 +696,21 @@ UsersSelect.prototype.formatResult = function(user) {
   } else {
     avatar = gon.default_avatar_url;
   }
-  return (
-    "<div class='user-result " +
-    (!user.username ? 'no-username' : void 0) +
-    "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" +
-    avatar +
-    "'></div> <div class='user-name dropdown-menu-user-full-name'>" +
-    _.escape(user.name) +
-    "</div> <div class='user-username dropdown-menu-user-username'>" +
-    (!user.invite ? '@' + _.escape(user.username) : '') +
-    '</div> </div>'
-  );
+  return `
+    <div class='user-result'>
+      <div class='user-image'>
+        <img class='avatar avatar-inline s32' src='${avatar}'>
+      </div>
+      <div class='user-info'>
+        <div class='user-name dropdown-menu-user-full-name'>
+          ${_.escape(user.name)}
+        </div>
+        <div class='user-username dropdown-menu-user-username text-secondary'>
+          ${!user.invite ? '@' + _.escape(user.username) : ''}
+        </div>
+      </div>
+    </div>
+  `;
 };
 
 UsersSelect.prototype.formatSelection = function(user) {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 381c0290d32..7f0edd88dfb 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -243,6 +243,8 @@
 
 .user-result {
   min-height: 24px;
+  display: flex;
+  align-items: center;
 
   .user-image {
     float: left;
diff --git a/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml b/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml
new file mode 100644
index 00000000000..3e87c5875c6
--- /dev/null
+++ b/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml
@@ -0,0 +1,5 @@
+---
+title: Fix misaligned approvers dropdown
+merge_request: 22832
+author:
+type: fixed