Fix layout issues with blame tableblame-ui-fix

Closes #21216

4 files changed, 8 insertions, 21 deletions

diff --git a/CHANGELOG b/CHANGELOG
index f54a17e1ea2..efb6cd8d670 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -14,6 +14,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)
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index e3be45ba1dc..76a3c083697 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/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;
-        }
       }
     }
 
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index aa8acbe7567..df41473543b 100644
--- a/app/helpers/avatars_helper.rb
+++ b/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]
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 377665b096f..5a98e258b22 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/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"