Merge branch '47850-placeholder-note-renders-the-user-name-in-a-new-line' into 'master'

Resolve "Placeholder note renders the user name in a new line"

Closes #47850

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

app/assets/javascripts/notes.js

@@ -1675,7 +1675,7 @@ export default class Notes {
                <div class="note-header">
                   <div class="note-header-info">
                      <a href="/${_.escape(currentUsername)}">
-                       <span class="d-none d-sm-block">${_.escape(
+                       <span class="d-none d-sm-inline-block">${_.escape(
                          currentUsername,
                        )}</span>
                        <span class="note-headline-light">${_.escape(
@@ -1694,7 +1694,7 @@ export default class Notes {
       </li>`,
     );
 
-    $tempNote.find('.d-none.d-sm-block').text(_.escape(currentUserFullname));
+    $tempNote.find('.d-none.d-sm-inline-block').text(_.escape(currentUserFullname));
     $tempNote
       .find('.note-headline-light')
       .text(`@${_.escape(currentUsername)}`);

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

@@ -54,7 +54,7 @@
         <div class="note-header">
           <div class="note-header-info">
             <a :href="getUserData.path">
-              <span class="d-none d-sm-block">{{ getUserData.name }}</span>
+              <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
               <span class="note-headline-light">@{{ getUserData.username }}</span>
             </a>
           </div>

spec/javascripts/notes_spec.js

@@ -974,7 +974,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         ).toBeFalsy();
         expect(
           $tempNoteHeader
-            .find('.d-none.d-sm-block')
+            .find('.d-none.d-sm-inline-block')
             .text()
             .trim(),
         ).toEqual(currentUserFullname);
@@ -1020,7 +1020,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         const $tempNoteHeader = $tempNote.find('.note-header');
         expect(
           $tempNoteHeader
-            .find('.d-none.d-sm-block')
+            .find('.d-none.d-sm-inline-block')
             .text()
             .trim(),
         ).toEqual('Foo <script>alert("XSS")</script>');