Missing space on system notes

app/assets/javascripts/notes/components/note_header.vue

@@ -170,17 +170,17 @@ export default {
       </span>
     </template>
     <span v-else>{{ __('A deleted user') }}</span>
-    <span class="note-headline-light note-headline-meta d-inline-flex align-items-center">
+    <span class="note-headline-light note-headline-meta d-sm-inline-flex align-items-center">
       <span class="system-note-message"> <slot></slot> </span>
       <template v-if="createdAt">
-        <span ref="actionText" class="system-note-separator">
+        <span ref="actionText" class="system-note-separator ml-1">
           <template v-if="actionText">{{ actionText }}</template>
         </span>
         <a
           v-if="noteTimestampLink"
           ref="noteTimestampLink"
           :href="noteTimestampLink"
-          class="note-timestamp system-note-separator"
+          class="note-timestamp system-note-separator mr-1"
           @click="updateTargetNoteHash"
         >
           <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
@@ -194,7 +194,7 @@ export default {
         name="eye-slash"
         :size="14"
         :title="__('Private comments are accessible by internal staff only')"
-        class="ml-1 gl-text-gray-800"
+        class="mx-1 gl-text-gray-800"
       />
       <slot name="extra-controls"></slot>
       <i

app/assets/javascripts/notes/components/noteable_note.vue

@@ -264,7 +264,7 @@ export default {
         >
           <slot slot="note-header-info" name="note-header-info"></slot>
           <span v-if="commit" v-html="actionText"></span>
-          <span v-else class="d-none d-sm-inline mr-1">&middot;</span>
+          <span v-else class="d-none d-sm-inline">&middot;</span>
         </note-header>
         <note-actions
           :author-id="author.id"

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -107,7 +107,7 @@ export default {
           <span v-html="actionTextHtml"></span>
           <template v-if="canSeeDescriptionVersion" slot="extra-controls">
             &middot;
-            <button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion">
+            <button type="button" class="btn-blank btn-link ml-1" @click="toggleDescriptionVersion">
               {{ __('Compare with previous version') }}
               <icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" />
             </button>

changelogs/unreleased/217310.yml

+---
+title: Fix missing space on system notes
+merge_request: 31598
+author:
+type: fixed