Address reviewer comments on new GlMentions component

Updated code in response to comments in
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26160

app/assets/javascripts/vue_shared/components/gl_mentions.vue

 <script>
 import escape from 'lodash/escape';
+import sanitize from 'sanitize-html';
 import Tribute from 'tributejs';
 import axios from '~/lib/utils/axios_utils';
 import { spriteIcon } from '~/lib/utils/common_utils';
@@ -13,15 +14,17 @@ import { spriteIcon } from '~/lib/utils/common_utils';
 function createMenuItemTemplate({ original }) {
   const rectAvatarClass = original.type === 'Group' ? 'rect-avatar' : '';
 
+  const avatarClasses = `avatar avatar-inline center s26 ${rectAvatarClass}
+    align-items-center d-inline-flex justify-content-center`;
+
   const avatarTag = original.avatar_url
     ? `<img
         src="${original.avatar_url}"
-        alt="${original.username} avatar"
-        class="avatar ${rectAvatarClass} avatar-inline center s26"/>`
-    : `<div class="avatar ${rectAvatarClass} avatar-inline center s26">
-        ${original.username.charAt(0).toUpperCase()}</div>`;
+        alt="${original.username}'s avatar"
+        class="${avatarClasses}"/>`
+    : `<div class="${avatarClasses}">${original.username.charAt(0).toUpperCase()}</div>`;
 
-  const name = escape(this.sanitize(original.name));
+  const name = escape(sanitize(original.name));
 
   const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : '';
 
@@ -91,11 +94,6 @@ export default {
       this.tribute.detach(input);
     }
   },
-  methods: {
-    sanitize(str) {
-      return str.replace(/<(?:.|\n)*?>/gm, '');
-    },
-  },
   render(h) {
     return h('div', this.$slots.default);
   },

app/assets/stylesheets/vendors/tribute.scss

@@ -4,7 +4,7 @@
   border-radius: $border-radius-base;
   box-shadow: 0 0 5px $issue-boards-card-shadow;
   color: $black;
-  margin-top: 12px;
+  margin-top: $gl-padding-12;
   max-height: 200px;
   min-width: 120px;
   overflow-y: auto;
@@ -13,27 +13,20 @@
   ul {
     list-style: none;
     margin-bottom: 0;
-    padding: 8px 1px;
+    padding: $gl-padding-8 1px;
   }
 
   li {
     cursor: pointer;
-    padding: 8px 16px;
+    padding: $gl-padding-8 $gl-padding;
     white-space: nowrap;
 
-    div.avatar {
-      align-items: center;
-      display: inline-flex;
-      justify-content: center;
-    }
-
     small {
       color: $gl-gray-500;
     }
 
     &.highlight {
       background-color: $gray-darker;
-      color: $gl-text-color;
 
       .avatar {
         @include disable-all-animation;