Fixed merge request tabs extra margin

Fixed extra margin when the merge request tabs are affixed This was caused by some weird padding that was on the container & then not correctly removed. The fix involved removing the container from inside the tabs holder div & then adding the widths through CSS depending on if fixed & whether the parent is limited width or not. In reality out container classes need to be fixed as it is getting pretty un-managable at the moment this should of been an easy fix, but in reality turned into something much harder. Closes #26853

Fixed merge request tabs extra margin
d7c0955b · Phil Hughes · b9ff4656 · d7c0955b · d7c0955b · d7c0955b
Commit d7c0955b authored Jan 27, 2017 by Phil Hughes
4 changed files
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -26,10 +26,6 @@
          border: 0;
        }
      }
-
-      .container-fluid {
-        @extend .fixed-width-container;
-      }
    }
  }


--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -420,10 +420,6 @@
 .merge-request-tabs-holder {
  background-color: $white-light;

-  .container-limited {
-    max-width: $limited-layout-width;
-  }
-
  &.affix {
    top: 100px;
    left: 0;
@@ -433,10 +429,26 @@
    @media (max-width: $screen-xs-max) {
      right: 0;
    }
+
+    .merge-request-tabs-container {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
+    }
  }
+}

-  &:not(.affix) .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
+.limit-container-width {
+  .merge-request-tabs-container {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.limit-container-width:not(.container-limited) {
+  .merge-request-tabs-holder:not(.affix) {
+    .merge-request-tabs-container {
+      max-width: $limited-layout-width - ($gl-padding * 2);
+    }
  }
 }
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -52,7 +52,7 @@
      = render 'award_emoji/awards_block', awardable: @merge_request, inline: true

    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-      %div{ class: container_class }
+      .merge-request-tabs-container
        %ul.merge-request-tabs.nav-links.no-top.no-bottom
          %li.notes-tab
            = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
@@ -115,4 +115,3 @@
  });

  var mrRefreshWidgetUrl = "#{mr_widget_refresh_url(@merge_request)}";
-
--- a/changelogs/unreleased/mr-tabs-container-offset.yml
+++ b/changelogs/unreleased/mr-tabs-container-offset.yml
+---
+title: Fixed merge requests tab extra margin when fixed to window
+merge_request:
+author: