Resolve "Username alignment issue on MR page"

app/assets/stylesheets/pages/issuable.scss

@@ -703,7 +703,8 @@
   text-overflow: ellipsis;
 
   .user-status-emoji {
-    margin: 0 $gl-padding-8 0 $gl-padding-4;
+    margin-left: $gl-padding-4;
+    margin-right: 0;
   }
 }
 

app/helpers/issuables_helper.rb

@@ -191,7 +191,7 @@ module IssuablesHelper
 
     output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip', title: _('1st contribution!'))
 
-    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block")
+    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block prepend-left-8")
     output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "d-md-none")
 
     output.join.html_safe

changelogs/unreleased/51412-username-alignment-issue-on-mr-page.yml

+---
+title: Add margin between username and subsequent text in issuable header
+merge_request: 21697
+author:
+type: other