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

app/assets/stylesheets/pages/issuable.scss

@@ -26,10 +26,6 @@
           border: 0;
         }
       }
-
-      .container-fluid {
-        @extend .fixed-width-container;
-      }
     }
   }
 

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;
+    }
+  }
+}
+
+.limit-container-width {
+  .merge-request-tabs-container {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  &:not(.affix) .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
+.limit-container-width:not(.container-limited) {
+  .merge-request-tabs-holder:not(.affix) {
+    .merge-request-tabs-container {
+      max-width: $limited-layout-width - ($gl-padding * 2);
+    }
   }
 }

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)}";
-

changelogs/unreleased/mr-tabs-container-offset.yml

+---
+title: Fixed merge requests tab extra margin when fixed to window
+merge_request:
+author: