Merge branch '251013-on-design-discussion-note-icons-are-misaligned' into 'master'

Resolve "On design discussion note, icons are misaligned"

See merge request gitlab-org/gitlab!42672

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { ApolloMutation } from 'vue-apollo';
-import { GlTooltipDirective, GlIcon, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
@@ -22,6 +21,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   props: {
     note: {
@@ -94,7 +94,7 @@ export default {
           :data-username="author.username"
         >
           <span class="note-header-author-name gl-font-weight-bold">{{ author.name }}</span>
-          <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
+          <span v-if="author.status_tooltip_html" v-safe-html="author.status_tooltip_html"></span>
           <span class="note-headline-light">@{{ author.username }}</span>
         </gl-link>
         <span class="note-headline-light note-headline-meta">
@@ -107,7 +107,7 @@ export default {
           </gl-link>
         </span>
       </div>
-      <div class="gl-display-flex">
+      <div class="gl-display-flex gl-align-items-baseline">
         <slot name="resolveDiscussion"></slot>
         <button
           v-if="isEditButtonVisible"
@@ -123,9 +123,9 @@ export default {
     </div>
     <template v-if="!isEditing">
       <div
+        v-safe-html="note.bodyHtml"
         class="note-text js-note-text md"
         data-qa-selector="note_content"
-        v-html="note.bodyHtml"
       ></div>
       <slot name="resolvedStatus"></slot>
     </template>

changelogs/unreleased/251013-on-design-discussion-note-icons-are-misaligned.yml

+---
+title: Resolve On design discussion note, icons are misaligned
+merge_request: 42672
+author:
+type: fixed

spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

@@ -60,7 +60,7 @@ exports[`Design note component should match the snapshot 1`] = `
     </div>
      
     <div
-      class="gl-display-flex"
+      class="gl-display-flex gl-align-items-baseline"
     >
        
       <!---->