1 files changed, 40 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 75c81b74ba7..0151446321a 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -236,6 +236,7 @@ ul.related-merge-requests > li gl-emoji {
       outline: none;
 
       &::after {
+        @include gl-dark-invert-keep-hue;
         content: image-url('icon_anchor.svg');
         visibility: hidden;
       }
@@ -272,20 +273,30 @@ ul.related-merge-requests > li gl-emoji {
 
 @include media-breakpoint-up(md) {
   // collapsed left sidebar + collapsed right sidebar
-  .issue-sticky-header {
+  .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
-  .right-sidebar-expanded .issue-sticky-header {
+  .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
-  .issue-sticky-header {
+  .page-with-contextual-sidebar .issue-sticky-header {
     left: $contextual-sidebar-width;
     --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width});
   }
@@ -297,14 +308,38 @@ ul.related-merge-requests > li gl-emoji {
   }
 
   // expanded left sidebar + expanded right sidebar
-  .right-sidebar-expanded .issue-sticky-header {
+  .page-with-contextual-sidebar.right-sidebar-expanded .issue-sticky-header {
     --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width});
   }
 
   // collapsed left sidebar + expanded right sidebar
-  .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header {
+  .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,