Keep inline as much as possible in system notes on issuable

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

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

@@ -87,27 +87,25 @@ export default {
       <span class="note-headline-light">@{{ author.username }}</span>
     </a>
     <span v-else>{{ __('A deleted user') }}</span>
-    <span class="note-headline-light">
-      <span class="note-headline-meta">
-        <span class="system-note-message"> <slot></slot> </span>
-        <template v-if="createdAt">
-          <span class="system-note-separator">
-            <template v-if="actionText">{{ actionText }}</template>
-          </span>
-          <a
-            :href="noteTimestampLink"
-            class="note-timestamp system-note-separator"
-            @click="updateTargetNoteHash"
-          >
-            <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
-          </a>
-        </template>
-        <i
-          class="fa fa-spinner fa-spin editing-spinner"
-          aria-label="Comment is being updated"
-          aria-hidden="true"
-        ></i>
-      </span>
+    <span class="note-headline-light note-headline-meta">
+      <span class="system-note-message"> <slot></slot> </span>
+      <template v-if="createdAt">
+        <span class="system-note-separator">
+          <template v-if="actionText">{{ actionText }}</template>
+        </span>
+        <a
+          :href="noteTimestampLink"
+          class="note-timestamp system-note-separator"
+          @click="updateTargetNoteHash"
+        >
+          <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
+        </a>
+      </template>
+      <i
+        class="fa fa-spinner fa-spin editing-spinner"
+        aria-label="Comment is being updated"
+        aria-hidden="true"
+      ></i>
     </span>
   </div>
 </template>

app/assets/stylesheets/pages/notes.scss

@@ -283,8 +283,6 @@ $note-form-margin-left: 72px;
     }
     .system-note-message {
-      display: inline;
-
       &::first-letter {
         text-transform: lowercase;
       }
@@ -607,12 +605,6 @@ $note-form-margin-left: 72px;
 }
 .note-headline-meta {
-  display: inline-block;
-
-  .system-note-message {
-    white-space: normal;
-  }
-
   .system-note-separator {
     color: $gl-text-color-disabled;
   }

app/views/shared/notes/_note.html.haml

@@ -36,14 +36,13 @@
             = user_status(note.author)
             %span.note-headline-light
               = note.author.to_reference
-          %span.note-headline-light
-            %span.note-headline-meta
-              - if note.system
-                %span.system-note-message
-                  = markdown_field(note, :note)
-              %span.system-note-separator
-                ·
-              %a.system-note-separator{ href: "##{dom_id(note)}" }= time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+          %span.note-headline-light.note-headline-meta
+            - if note.system
+              %span.system-note-message
+                = markdown_field(note, :note)
+            %span.system-note-separator
+              ·
+            %a.system-note-separator{ href: "##{dom_id(note)}" }= time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
         - unless note.system?
           .note-actions
             - if note.for_personal_snippet?

changelogs/unreleased/58789-some-system-notes-on-issuable-are-folded-on-mobile.yml

+---
+title: Keep inline as much as possible in system notes on issuable
+merge_request: 25968
+author: Takuya Noguchi
+type: fixed