Merge branch '322680-at-root' into 'master'

Remove excessive specificity in refactoring of left-hand panel with the flag OFF

See merge request gitlab-org/gitlab!62556

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss

-.page-with-contextual-sidebar {
-  transition: padding-left $sidebar-transition-duration;
-
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding-left: $contextual-sidebar-width;
-  }
-
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-    padding: 10px 0 15px;
-  }
-}
-
-.page-with-icon-sidebar {
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-}
-
-.settings-avatar {
-  background-color: $white;
-
-  svg {
-    fill: $gl-text-color-secondary;
-    margin: auto;
-  }
-}
-
 @mixin collapse-contextual-sidebar-content {
 
   @include context-header-collapsed;
@@ -61,6 +30,62 @@
   }
 }
 
+@mixin collapse-contextual-sidebar {
+  width: $contextual-sidebar-collapsed-width;
+
+  .nav-sidebar-inner-scroll {
+    overflow-x: hidden;
+  }
+
+  .badge.badge-pill:not(.fly-out-badge),
+  .nav-item-name {
+    @include gl-sr-only;
+  }
+
+  .sidebar-top-level-items > li > a {
+    min-height: 45px;
+  }
+
+  .fly-out-top-item {
+    display: block;
+  }
+
+  .avatar-container {
+    margin: 0 auto;
+  }
+}
+
+.page-with-contextual-sidebar {
+  transition: padding-left $sidebar-transition-duration;
+
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+
+  @include media-breakpoint-up(xl) {
+    padding-left: $contextual-sidebar-width;
+  }
+
+  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+    padding: 10px 0 15px;
+  }
+}
+
+.page-with-icon-sidebar {
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+}
+
+.settings-avatar {
+  background-color: $white;
+
+  svg {
+    fill: $gl-text-color-secondary;
+    margin: auto;
+  }
+}
+
 .nav-sidebar {
   transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
   position: fixed;
@@ -79,31 +104,6 @@
     }
   }
 
-  @mixin collapse-contextual-sidebar {
-    width: $contextual-sidebar-collapsed-width;
-
-    .nav-sidebar-inner-scroll {
-      overflow-x: hidden;
-    }
-
-    .badge.badge-pill:not(.fly-out-badge),
-    .nav-item-name {
-      @include gl-sr-only;
-    }
-
-    .sidebar-top-level-items > li > a {
-      min-height: 45px;
-    }
-
-    .fly-out-top-item {
-      display: block;
-    }
-
-    .avatar-container {
-      margin: 0 auto;
-    }
-  }
-
   &.sidebar-collapsed-desktop {
     @include collapse-contextual-sidebar;
   }
@@ -381,3 +381,4 @@
     }
   }
 }
+

app/assets/stylesheets/performance_bar.scss

@@ -137,5 +137,5 @@
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $header-height + $performance-bar-height !important;
+  top: $header-height + $performance-bar-height;
 }