Fix note header timeago and action overlap

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/30810

app/assets/stylesheets/pages/notes.scss

@@ -344,6 +344,15 @@ ul.notes {
   font-size: 14px;
 }
+.note-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.note-header-info {
+  min-width: 0;
+}
+
 .note-headline-light {
   display: inline;
@@ -363,21 +372,25 @@ ul.notes {
   }
 }
+.note-headline-meta {
+  display: inline-block;
+  white-space: nowrap;
+}
+
 /**
  * Actions for Discussions/Notes
  */
-.discussion-actions,
-.note-actions {
+.discussion-actions {
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
 }
 .note-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
+  flex-shrink: 0;
+  margin-left: 10px;
+  color: $gray-darkest;
   .note-action-button {
     margin-left: 8px;

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

@@ -12,19 +12,19 @@
           = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
     .timeline-content
       .note-header
-        %a.visible-xs{ href: user_path(note.author) }
-          = note.author.to_reference
-        = link_to_member(note.project, note.author, avatar: false, extra_class: 'hidden-xs')
-        .note-headline-light
-          %span.hidden-xs
-            = note.author.to_reference
-          - unless note.system
-            commented
-          - if note.system
-            %span.system-note-message
-              = note.redacted_note_html
-          %a{ href: "##{dom_id(note)}" }
-            = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+        .note-header-info
+          = link_to_member(note.project, note.author, avatar: false, extra_class: 'hidden-xs')
+          .note-headline-light
+            %a{ href: user_path(note.author) }
+              = note.author.to_reference
+            %span.note-headline-meta
+              - unless note.system
+                commented
+              - if note.system
+                %span.system-note-message
+                  = note.redacted_note_html
+              %a{ href: "##{dom_id(note)}" }
+                = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
         - unless note.system?
           .note-actions
             - access = note_max_access_for_user(note)