Fix cut off line number in file blame: refactor to gitlab-ui classes

The following discussion from !51259 (merged) should be addressed:

• @pgascouvaillancourt started a discussion: (+2 comments)

  nitpick: Would it be possible to use GitLab UI utilities for these new rules?

  diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
  index 28577e2801e..03f7a8be6d4 100644
  --- a/app/assets/stylesheets/framework/highlight.scss
  +++ b/app/assets/stylesheets/framework/highlight.scss
  @@ -45,8 +45,6 @@
   
       a {
         font-family: $monospace-font;
  -      display: flex;
  -      justify-content: flex-end;
         font-size: $code-font-size !important;
         white-space: nowrap;
   
  diff --git a/app/views/projects/blame/_blame_group.html.haml b/app/views/projects/blame/_blame_group.html.haml
  index e9967814833..02ffec1dd2a 100644
  --- a/app/views/projects/blame/_blame_group.html.haml
  +++ b/app/views/projects/blame/_blame_group.html.haml
  @@ -15,7 +15,7 @@
     %td.line-numbers
       - line_count = blame_group[:lines].count
       - (current_line...(current_line + line_count)).each do |i|
  -      %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
  +      %a.diff-line-num.gl-display-flex.gl-justify-content-end{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
           = link_icon
           = i
         \

More Discussion

Option A

unfortunately, the styles defined in highlight.scss has a higher specificity and override the setting of our utility styles.

Another route I thought of taking was to remove the display: block from highlight.scss and apply our utility class. But then that would mean to track down all the files that are picking up this style and add our GL utility class. And I didn't think it was a good idea to expand the scope of this MR.

Option B

another option would be to use the important version of our utility classes, even tho, I don't love them too much.