Add latest changes from gitlab-org/gitlab@master

7 files changed, 94 insertions, 134 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index febb597e26e..56ef6d13252 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -5,6 +5,9 @@
   --top-bar-height: 0px;
   --system-footer-height: 0px;
   --mr-review-bar-height: 0px;
+
+  --application-bar-left: 0px;
+  --application-bar-right: 0px;
 }
 
 .with-performance-bar {
@@ -27,6 +30,42 @@
   --mr-review-bar-height: #{$mr-review-bar-height};
 }
 
+@include media-breakpoint-up(md) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: #{$contextual-sidebar-collapsed-width};
+  }
+
+  .right-sidebar-collapsed {
+    --application-bar-right: #{$gutter-collapsed-width};
+
+    &.is-merge-request {
+      --application-bar-right: 0px;
+    }
+  }
+
+  .right-sidebar-expanded {
+    --application-bar-right: #{$gutter-width};
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: #{$contextual-sidebar-width};
+  }
+
+  .page-with-icon-sidebar {
+    --application-bar-left: #{$contextual-sidebar-collapsed-width};
+  }
+
+  .page-with-super-sidebar {
+    --application-bar-left: #{$super-sidebar-width};
+  }
+
+  .page-with-super-sidebar-collapsed {
+    --application-bar-left: 0px;
+  }
+}
+
 /** COLORS **/
 .cgray { color: $gl-text-color; }
 .clgray { color: $gray-200; }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a5ff3c9c980..0c53b3fd866 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -317,42 +317,22 @@ $search-input-field-x-min-width: 200px;
 }
 
 .top-bar-fixed {
+  @include gl-inset-border-b-1-gray-100;
   background-color: $body-bg;
-  left: 0;
+  left: var(--application-bar-left);
   position: fixed;
-  right: 0;
+  right: var(--application-bar-right);
   top: $calc-application-bars-height;
   width: auto;
   z-index: $top-bar-z-index;
-  @include gl-inset-border-b-1-gray-100;
-
-  .breadcrumbs-list {
-    @include media-breakpoint-down(xs) {
-      flex-wrap: nowrap;
-    }
-  }
 
   @media (prefers-reduced-motion: no-preference) {
     transition: left $gl-transition-duration-medium, right $gl-transition-duration-medium;
   }
 
-  @include media-breakpoint-up(md) {
-    .right-sidebar-collapsed & {
-      right: $gutter-collapsed-width;
-    }
-
-    .right-sidebar-expanded & {
-      right: $gutter-width;
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    .page-with-super-sidebar & {
-      left: $super-sidebar-width;
-    }
-
-    .page-with-super-sidebar-collapsed & {
-      left: 0;
+  .breadcrumbs-list {
+    @include media-breakpoint-down(xs) {
+      flex-wrap: nowrap;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 74d5c64f57d..f2486640650 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -56,7 +56,7 @@
   z-index: $zindex-dropdown-menu;
 
   &.right-sidebar-merge-requests {
-    width: 300px;
+    width: $gutter-width;
 
     @include media-breakpoint-up(md) {
       z-index: auto;
@@ -319,7 +319,7 @@
     @include right-sidebar;
     top: calc(#{$header-height} + #{$calc-application-bars-height});
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       z-index: 251;
     }
   }
@@ -327,9 +327,13 @@
   &.right-sidebar-merge-requests {
     @include media-breakpoint-down(md) {
       @include right-sidebar;
-      top: $calc-application-header-height;
+      top: calc(#{$header-height} + #{$calc-application-bars-height});
       z-index: 251;
     }
+
+    @include media-breakpoint-down(sm) {
+      top: $calc-application-header-height;
+    }
   }
 
   a:not(.btn) {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index d3ebc06a1dd..17ca7828a20 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -964,7 +964,7 @@ $tabs-holder-z-index: 250;
 .merge-request-overview {
   @include media-breakpoint-up(lg) {
     display: grid;
-    grid-template-columns: calc(97% - 285px) auto;
+    grid-template-columns: calc(97% - #{$gutter-width}) auto;
     grid-gap: 3%;
   }
 }
@@ -1081,30 +1081,6 @@ $tabs-holder-z-index: 250;
   box-shadow: 0 1px 4px rgba($gray-300, 0.4);
 }
 
-.page-with-contextual-sidebar .merge-request-sticky-header {
-  --width: calc(100% - #{$contextual-sidebar-width});
-
-  @include media-breakpoint-down(lg) {
-    --width: calc(100% - #{$contextual-sidebar-collapsed-width});
-  }
-}
-
-.page-with-icon-sidebar .issue-sticky-header {
-  --width: calc(100% - #{$contextual-sidebar-collapsed-width});
-}
-
-.page-with-super-sidebar .merge-request-sticky-header {
-  @include media-breakpoint-up(xl) {
-    --width: calc(100% - #{$super-sidebar-width});
-  }
-}
-
-.page-with-super-sidebar-collapsed .merge-request-sticky-header {
-  @include media-breakpoint-up(xl) {
-    --width: 100%;
-  }
-}
-
 .merge-request-notification-toggle {
   .gl-toggle {
     @include gl-ml-auto;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 9b6a3362e71..36efe42aed1 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -250,16 +250,10 @@ ul.related-merge-requests > li gl-emoji {
 }
 
 .issue-sticky-header {
-  --width: 100%;
-
-  @include gl-left-0;
-  width: var(--width);
+  left: var(--application-bar-left);
+  right: var(--application-bar-right);
+  width: auto;
   top: $calc-application-header-height;
-
-  // collapsed right sidebar
-  @include media-breakpoint-up(sm) {
-    --width: calc(100% - #{$gutter-collapsed-width});
-  }
 }
 
 .limit-container-width {
@@ -268,77 +262,6 @@ ul.related-merge-requests > li gl-emoji {
   }
 }
 
-@include media-breakpoint-up(md) {
-  // collapsed left sidebar + collapsed right sidebar
-  .page-with-contextual-sidebar .issue-sticky-header {
-    left: $contextual-sidebar-collapsed-width;
-    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
-  }
-
-  // collapsed left sidebar + expanded right sidebar
-  .page-with-contextual-sidebar.right-sidebar-expanded .issue-sticky-header {
-    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
-  }
-
-  // collapsed super sidebar + collapsed right sidebar
-  .page-with-super-sidebar .issue-sticky-header {
-    --width: calc(100% - #{$gutter-collapsed-width});
-  }
-
-  // collapsed super sidebar + expanded right sidebar
-  .page-with-super-sidebar.right-sidebar-expanded .issue-sticky-header {
-    --width: calc(100% - #{$gutter-width});
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  // expanded left sidebar + collapsed right sidebar
-  .page-with-contextual-sidebar .issue-sticky-header {
-    left: $contextual-sidebar-width;
-    --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width});
-  }
-
-  // collapsed left sidebar + collapsed right sidebar
-  .page-with-icon-sidebar .issue-sticky-header {
-    left: $contextual-sidebar-collapsed-width;
-    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
-  }
-
-  // expanded left sidebar + expanded right sidebar
-  .page-with-contextual-sidebar.right-sidebar-expanded .issue-sticky-header {
-    --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width});
-  }
-
-  // collapsed left sidebar + expanded right sidebar
-  .page-with-contextual-sidebar.right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header {
-    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
-  }
-
-  // expanded super sidebar + collapsed right sidebar
-  .page-with-super-sidebar .issue-sticky-header {
-    left: $super-sidebar-width;
-    --width: calc(100% - #{$super-sidebar-width} - #{$gutter-collapsed-width});
-  }
-
-  // collapsed super sidebar + collapsed right sidebar
-  .page-with-super-sidebar-collapsed .issue-sticky-header {
-    left: 0;
-    --width: calc(100% - #{$gutter-collapsed-width});
-  }
-
-  // expanded super sidebar + expanded right sidebar
-  .page-with-super-sidebar.right-sidebar-expanded .issue-sticky-header {
-    left: $super-sidebar-width;
-    --width: calc(100% - #{$super-sidebar-width} - #{$gutter-width});
-  }
-
-  // collapsed super sidebar + expanded right sidebar
-  .page-with-super-sidebar-collapsed.right-sidebar-expanded .issue-sticky-header {
-    left: 0;
-    --width: calc(100% - #{$gutter-width});
-  }
-}
-
 .issuable-header-slide-enter-active,
 .issuable-header-slide-leave-active {
   @include gl-transition-medium;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index bb838437939..74ffebd44ec 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -635,6 +635,25 @@ html {
 .with-top-bar {
   --top-bar-height: 48px;
 }
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 56px;
+  }
+}
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-icon-sidebar {
+    --application-bar-left: 56px;
+  }
+  .page-with-super-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-super-sidebar-collapsed {
+    --application-bar-left: 0px;
+  }
+}
 .gl-font-sm {
   font-size: 12px;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 079e59f5521..c5a5d1aa289 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -635,6 +635,25 @@ html {
 .with-top-bar {
   --top-bar-height: 48px;
 }
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 56px;
+  }
+}
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-icon-sidebar {
+    --application-bar-left: 56px;
+  }
+  .page-with-super-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-super-sidebar-collapsed {
+    --application-bar-left: 0px;
+  }
+}
 .gl-font-sm {
   font-size: 12px;
 }