Merge branch 'blame-ui-fix' into 'master'

Fix layout issues with blame table

## What does this MR do?

Fixes layout issues with the blame before. Previously the content would expanded out of the table making it look ugly!

## Screenshots (if relevant)

![Screen_Shot_2016-09-06_at_10.36.17](/uploads/719fc7cdf909b18afbe8afafbae7d99a/Screen_Shot_2016-09-06_at_10.36.17.png)

## What are the relevant issue numbers?

Closes #21216

See merge request !6218

CHANGELOG

@@ -20,6 +20,7 @@ v 8.12.0 (unreleased)
   - Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)
   - Expose `sha` and `merge_commit_sha` in merge request API (Ben Boeckel)
   - Set path for all JavaScript cookies to honor GitLab's subdirectory setting !5627 (Mike Greiling)
+  - Fix blame table layout width
   - Fix bug where pagination is still displayed despite all todos marked as done (ClemMakesApps)
   - Center build stage columns in pipeline overview (ClemMakesApps)
   - Rename behaviour to behavior in bug issue template for consistency (ClemMakesApps)

app/assets/stylesheets/framework/files.scss

@@ -63,7 +63,7 @@
     &.image_file {
       background: #eee;
       text-align: center;
-      
+
       img {
         padding: 20px;
         max-width: 80%;
@@ -94,7 +94,6 @@
     &.blame {
       table {
         border: none;
-        box-shadow: none;
         margin: 0;
       }
       tr {
@@ -108,19 +107,10 @@
           border-right: none;
         }
       }
-      img.avatar {
-        border: 0 none;
-        float: none;
-        margin: 0;
-        padding: 0;
-      }
       td.blame-commit {
+        padding: 0 10px;
+        min-width: 400px;
         background: $gray-light;
-        min-width: 350px;
-
-        .commit-author-link {
-          color: #888;
-        }
       }
       td.line-numbers {
         float: none;
@@ -133,12 +123,6 @@
       }
       td.lines {
         padding: 0;
-        code {
-          font-family: $monospace_font;
-        }
-        pre {
-          margin: 0;
-        }
       }
     }
 

app/helpers/avatars_helper.rb

@@ -14,7 +14,8 @@ module AvatarsHelper
       avatar_icon(options[:user] || options[:user_email], avatar_size),
       class: "avatar has-tooltip hidden-xs s#{avatar_size}",
       alt: "#{user_name}'s avatar",
-      title: user_name
+      title: user_name,
+      data: { container: 'body' }
     )
 
     if options[:user]

app/views/projects/blame/show.html.haml

@@ -11,7 +11,7 @@
       %small= number_to_human_size @blob.size
       .file-actions
         = render "projects/blob/actions"
-    .file-content.blame.code.js-syntax-highlight
+    .table-responsive.file-content.blame.code.js-syntax-highlight
       %table
         - current_line = 1
         - @blame_groups.each do |blame_group|
@@ -19,6 +19,7 @@
             %td.blame-commit
               .commit
                 - commit = blame_group[:commit]
+                = author_avatar(commit, size: 36)
                 .commit-row-title
                   %strong
                     = link_to_gfm truncate(commit.title, length: 35), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "cdark"