Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

34 files changed, 396 insertions, 133 deletions

diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index a3cbdb9ae86..377d5130571 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -12,7 +12,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     top: 35px;
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     display: flex;
     height: $design-pin-diameter;
     width: $design-pin-diameter;
@@ -23,6 +23,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     border-radius: 50%;
     z-index: 1;
     padding: 0;
+    border: 0;
 
     &.resolved {
       background-color: $gray-500;
@@ -34,7 +35,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 
   .comment-indicator,
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     &:active {
       cursor: grabbing;
     }
@@ -43,7 +44,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   /**
    * Design pin that overlays the design
    */
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
     border: $white 2px solid;
     will-change: transform, box-shadow, opacity;
@@ -114,7 +115,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     }
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     margin-left: $gl-padding;
   }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e458dfd5316..e0e9043ae24 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -451,3 +451,17 @@ fieldset[disabled] .btn,
   box-shadow: none;
   border-width: 1px;
 }
+
+copy-code {
+  @include gl-absolute;
+  @include gl-transition-medium;
+  @include gl-opacity-0;
+
+  top: 7px;
+  right: $input-horizontal-padding;
+
+  .markdown-code-block:hover &,
+  &:focus-within {
+    @include gl-opacity-10;
+  }
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 354d2737894..36a0d3ca3ca 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -479,6 +479,13 @@ img.emoji {
   border-top: 1px solid $border-color;
 }
 
+.gl-pseudo-placeholder:empty::before {
+  content: attr(data-placeholder);
+  font-weight: $gl-font-weight-normal;
+  color: $gl-text-color-secondary;
+  cursor: text;
+}
+
 /**
 🚨 Do not use these classes — they clash with the Gitlab UI design system and will be removed. 🚨
 See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index fa1892903a3..345c180d164 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -81,7 +81,6 @@
       @include gl-px-0;
       @include gl-pb-2;
       @include gl-pt-0;
-      min-width: 150px;
       background-color: $gray-10;
       box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
       border-style: none;
@@ -309,6 +308,10 @@
   }
 
   a.has-sub-items + .sidebar-sub-level-items {
+    @include media-breakpoint-up(sm) {
+      min-width: 150px;
+    }
+
     .fly-out-top-item {
       @include fly-out-top-item($has-sub-items: true);
     }
@@ -373,6 +376,18 @@
       }
     }
   }
+
+  li > a.gl-link {
+    // undo gl-link text items for things in the sidebar - including sub menus
+    // defined in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/5431e0ca5149d4e02e3d5d617d194ac9609bb82d/src/components/base/link/link.scss
+    @include gl-text-body;
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      @include gl-text-decoration-none;
+    }
+  }
 }
 
 .sidebar-sub-level-items {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 8f65f349cf9..9209a0c2173 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -151,7 +151,17 @@
         margin: 0;
       }
 
+      //
+      // IMPORTANT PERFORMANCE OPTIMIZATION
+      //
+      // When viewinng a blame with many commits a lot of content is rendered on the page.
+      // content-visibility rule below ensure that we only render what is visible to the user,
+      // thus reducing TBT in the browser.
+      // Grid is used instead of table layout because content-visibility performs better with it.
       tr {
+        content-visibility: auto;
+        display: grid;
+        grid-template-columns: 400px max-content auto;
         border-bottom: 1px solid $gray-darker;
 
         &:last-child {
@@ -201,6 +211,10 @@
         &.lines {
           padding: 0;
         }
+
+        .code {
+          height: 100%;
+        }
       }
 
       @for $i from 0 through 5 {
@@ -222,25 +236,6 @@
           color: $gray-900;
         }
       }
-
-      //
-      // IMPORTANT PERFORMANCE OPTIMIZATION
-      //
-      // When viewinng a blame with many commits a lot of content is rendered on the page.
-      // content-visibility rules below ensure that we only render what is visible to the user, thus reducing TBT in the browser.
-      .commit {
-        content-visibility: auto;
-        contain-intrinsic-size: 1px 3em;
-      }
-
-      code .line {
-        content-visibility: auto;
-        contain-intrinsic-size: 1px 1.1875rem;
-      }
-
-      .line-numbers {
-        content-visibility: auto;
-      }
     }
 
     &.logs {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ae46ff33ec0..44b099fc873 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -523,9 +523,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   background-color: $orange-300;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 
 .with-notifications .notification-dot {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index e00bb83362a..f79dc38f2f7 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -174,3 +174,30 @@ body {
     min-height: 0;
   }
 }
+
+.gl-drawer-responsive {
+  // Both width & min-width
+  // are defined as per Pajamas
+  // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44902#note_429056182
+  width: 28%;
+  min-width: 400px;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+  box-shadow: none;
+  background-color: $gray-10;
+  border-left: 1px solid $gray-100;
+
+  @include media-breakpoint-down(sm) {
+    min-width: unset;
+    width: 100%;
+  }
+
+  // These overrides should not happen here,
+  // we should ideally have support for custom
+  // header and body classes in `GlDrawer`.
+  .gl-drawer-header,
+  .gl-drawer-body > * {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 9b04b9a2612..c6e52c13e83 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -139,6 +139,10 @@
   font-family: $monospace-font !important;
 }
 
+.suggestions.md > .markdown-code-block {
+  @include gl-static;
+}
+
 .md-suggestion-header {
   height: $suggestion-header-height;
   display: flex;
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index c59e70c80df..39786aa0138 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -16,6 +16,11 @@
 .snippet-file-content {
   border-radius: 3px;
 
+  .file-content {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
   + .snippet-file-content {
     @include gl-mt-5;
   }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index cb36c4e5767..16ff4b81f95 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -625,6 +625,7 @@ body {
 
 /** CODE **/
 pre {
+  @include gl-relative;
   font-family: $monospace-font;
   display: block;
   padding: $gl-padding-8 $input-horizontal-padding;
@@ -636,6 +637,11 @@ pre {
   background-color: $gray-light;
   border: 1px solid $gray-100;
   border-radius: $border-radius-small;
+
+  // Select only code elements that will have the copy code button
+  .markdown-code-block & {
+    padding: $input-horizontal-padding;
+  }
 }
 
 code {
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index fb4266a2f41..97dd7edef13 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -45,12 +45,12 @@
   }
 }
 
-@mixin line-number-hover($color) {
-  background-color: $color;
-  border-color: darken($color, 5%);
+@mixin line-number-hover {
+  background-color: $purple-100;
+  border-color: $purple-200;
 
   a {
-    color: darken($color, 15%);
+    color: $gray-600;
   }
 }
 
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 2d180f49f97..0b696f1be60 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -22,7 +22,6 @@ $dark-highlight-bg: #ffe792;
 $dark-highlight-color: $black;
 $dark-pre-hll-bg: #373b41;
 $dark-hll-bg: #373b41;
-$dark-over-bg: #9f9ab5;
 $dark-expanded-bg: #3e3e3e;
 $dark-coverage: #b3e841;
 $dark-no-coverage: #ff4f33;
@@ -93,9 +92,10 @@ $dark-il: #de935f;
   .file-line-num {
     @include line-number-link($dark-line-num-color);
   }
-  
+
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $dark-main-bg;
   }
 
@@ -169,16 +169,17 @@ $dark-il: #de935f;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($dark-over-bg);
+        @include line-number-hover;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($dark-over-bg);
+        @include line-number-hover;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index c0931188cc3..ae72c0b6bf4 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -15,7 +15,6 @@ $monokai-line-empty-bg: #49483e;
 $monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
 $monokai-diff-border: #808080;
 $monokai-highlight-bg: #ffe792;
-$monokai-over-bg: #9f9ab5;
 $monokai-expanded-bg: #3e3e3e;
 $monokai-coverage: #a6e22e;
 $monokai-no-coverage: #fd971f;
@@ -96,7 +95,8 @@ $monokai-gh: #75715e;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $monokai-bg;
   }
 
@@ -170,16 +170,17 @@ $monokai-gh: #75715e;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($monokai-over-bg);
+        @include line-number-hover;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($monokai-over-bg);
+        @include line-number-hover;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index ef7eb244b61..913b289d808 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -16,7 +16,8 @@
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $gray-light;
   }
 
@@ -43,7 +44,6 @@
   }
 
   // Diff line
-  $none-over-bg: #ded7fc;
   $none-expanded-border: #e0e0e0;
   $none-expanded-bg: #e0e0e0;
 
@@ -67,9 +67,10 @@
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($none-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -88,7 +89,7 @@
 
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($none-over-bg);
+        @include line-number-hover;
       }
 
       &.hll:not(.empty-cell) {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 8f09a178af1..eee699ca4c2 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -19,7 +19,6 @@ $solarized-dark-line-color-new: #5a766c;
 $solarized-dark-line-color-old: #7a6c71;
 $solarized-dark-highlight: #094554;
 $solarized-dark-hll-bg: #174652;
-$solarized-dark-over-bg: #9f9ab5;
 $solarized-dark-expanded-bg: #010d10;
 $solarized-dark-coverage: #859900;
 $solarized-dark-no-coverage: #cb4b16;
@@ -99,7 +98,8 @@ $solarized-dark-il: #2aa198;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $solarized-dark-line-bg;
   }
 
@@ -149,9 +149,10 @@ $solarized-dark-il: #2aa198;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($solarized-dark-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -182,7 +183,7 @@ $solarized-dark-il: #2aa198;
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($solarized-dark-over-bg);
+        @include line-number-hover;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 747cc639f91..8c5e1f7318b 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -20,7 +20,6 @@ $solarized-light-line-color-new: #a1a080;
 $solarized-light-line-color-old: #ad9186;
 $solarized-light-highlight: #eee8d5;
 $solarized-light-hll-bg: #ddd8c5;
-$solarized-light-over-bg: #ded7fc;
 $solarized-light-expanded-border: #d2cdbd;
 $solarized-light-expanded-bg: #ece6d4;
 $solarized-light-coverage: #859900;
@@ -106,7 +105,8 @@ $solarized-light-il: #2aa198;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $solarized-light-line-bg;
   }
 
@@ -169,9 +169,10 @@ $solarized-light-il: #2aa198;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($solarized-light-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -190,7 +191,7 @@ $solarized-light-il: #2aa198;
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($solarized-light-over-bg);
+        @include line-number-hover;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 86b01926dd7..c0f8475323a 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -9,7 +9,6 @@ $white-code-color: $gl-text-color;
 $white-highlight: #fafe3d;
 $white-pre-hll-bg: #f8eec7;
 $white-hll-bg: #f8f8f8;
-$white-over-bg: #ded7fc;
 $white-expanded-border: #e0e0e0;
 $white-expanded-bg: #f7f7f7;
 $white-c: #998;
@@ -83,7 +82,8 @@ $white-gc-bg: #eaf2f5;
 }
 
 .line-numbers,
-.diff-line-num {
+.diff-line-num,
+.code-search-line {
   background-color: $gray-light;
 
   &.conflict_marker,
@@ -129,9 +129,10 @@ pre.code,
   }
 
   .diff-grid-left:hover,
-  .diff-grid-right:hover {
+  .diff-grid-right:hover,
+  &.code-search-line:hover {
     .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
-      @include line-number-hover($white-over-bg);
+      @include line-number-hover;
     }
   }
 
@@ -156,7 +157,7 @@ pre.code,
 
     &.is-over,
     &.hll:not(.empty-cell).is-over {
-      @include line-number-hover($white-over-bg);
+      @include line-number-hover;
     }
 
     &.hll:not(.empty-cell) {
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 3e5271f84d5..2c5ea8347ae 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -326,10 +326,6 @@
   }
 }
 
-.transfer-project .select2-container {
-  min-width: 200px;
-}
-
 .right-sidebar {
   .block {
     .select2-container span {
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 8794acd3c78..ee777820b81 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -113,8 +113,8 @@
  - mini graph in Commit widget pipeline
 */
 @mixin pipeline-graph-dropdown-menu() {
-  width: 240px;
-  max-width: 240px;
+  width: auto;
+  max-width: 400px;
 
   // override dropdown.scss
   &.dropdown-menu li button,
@@ -185,8 +185,6 @@
       }
 
       .ci-status-icon {
-        @include gl-mr-3;
-
         position: relative;
 
         > svg {
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 47580e37eca..d37171bc75e 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -904,6 +904,7 @@ $ide-commit-header-height: 48px;
   .sidebar-context-title {
     white-space: nowrap;
     display: block;
+    color: var(--ide-text-color, $gl-text-color);
 
     &.text-secondary {
       font-weight: normal;
@@ -964,6 +965,10 @@ $ide-commit-header-height: 48px;
       margin: 0;
     }
   }
+
+  .gl-tab-content {
+    color: var(--ide-text-color, $gl-text-color);
+  }
 }
 
 .ide-pipeline-header {
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index c74b5460e1a..79468ce62ce 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -1,12 +1,5 @@
 @import 'mixins_and_variables_and_functions';
 
-// Fixing double scrollbar issue
-// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1156 and
-// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54837
-.import-entities-namespace-dropdown.show.dropdown .dropdown-menu {
-  max-height: initial;
-}
-
 .import-jobs-to-col {
   width: 39%;
 }
@@ -38,3 +31,31 @@
     box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
   }
 }
+
+$import-bar-height: $gl-spacing-scale-11;
+
+.import-table-bar {
+  @include gl-sticky;
+  height: $import-bar-height;
+  top: $header-height;
+  z-index: 3;
+
+  html.with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
+}
+
+.import-table {
+  border-collapse: separate;
+
+  thead {
+    @include gl-sticky;
+    background-color: var(--gray-10, $gray-10);
+    top: calc(#{$header-height} + #{$import-bar-height});
+    z-index: 3;
+
+    html.with-performance-bar & {
+      top: calc(#{$header-height + $performance-bar-height} + #{$import-bar-height});
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 7d1230b0225..02113fe8b58 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -45,7 +45,7 @@
   top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
   // stylelint-disable-next-line length-zero-no-unit
   max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
-  z-index: 202;
+  z-index: 205;
 
   .drag-handle {
     bottom: 16px;
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index c8b1b6cf9aa..a9d353a0444 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -129,11 +129,17 @@
 }
 
 .gl-pipeline-job-width {
-  width: 186px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .gl-pipeline-job-width\! {
-  width: 186px !important;
+  width: 100% !important;
+  max-width: 400px !important;
+}
+
+.gl-downstream-pipeline-job-width {
+  width: 240px;
 }
 
 .gl-linked-pipeline-padding {
@@ -199,7 +205,6 @@
 
 .big-pipeline-graph-dropdown-menu {
   @include pipeline-graph-dropdown-menu();
-  width: 195px;
   min-width: 195px;
   left: 100%;
   top: -10px;
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index b450bca4f41..5a091c14e53 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -7,20 +7,6 @@
     }
   }
 
-  .agents-empty-state {
-    .text-content {
-      @include gl-max-w-full;
-      @include media-breakpoint-up(lg) {
-        max-width: 70%;
-      }
-    }
-
-    .gl-alert-actions {
-      @include gl-mt-0;
-      @include gl-flex-wrap;
-    }
-  }
-
   .gl-card-body {
     @include media-breakpoint-up(sm) {
       @include gl-pt-2;
@@ -40,3 +26,15 @@
     }
   }
 }
+
+.agent-activity-list {
+  .system-note .timeline-entry-inner {
+    .timeline-icon {
+      @include gl-mt-1;
+    }
+  }
+
+  &.issuable-discussion .main-notes-list::before {
+    @include gl-top-3;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 7f35b8fab43..cc8ea1493fc 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -149,7 +149,6 @@
 .commit-content {
   padding-right: 10px;
   white-space: normal;
-  overflow: hidden;
 
   .commit-title {
     display: flex;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index cf5e93e94a2..8600a4059d8 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -456,12 +456,6 @@
     }
 
     .multiple-users {
-      position: relative;
-      height: 24px;
-      margin-bottom: 17px;
-      margin-top: 4px;
-      padding-bottom: 4px;
-
       .btn-link {
         padding: 0;
         border: 0;
@@ -875,10 +869,6 @@
   }
 }
 
-.issuable-suggestions svg {
-  vertical-align: sub;
-}
-
 .suggestion-footer {
   font-size: 12px;
   line-height: 15px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 3b86750c6ca..a4b8e912614 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -947,19 +947,6 @@ $tabs-holder-z-index: 250;
     color: $gray-500;
     line-height: initial;
   }
-
-  // GlDropdown mini pipeline (Vue)
-  //   As the `mini-pipeline-item` mixin specificity is lower
-  //   than the toggle of dropdown with 'variant="link"' we add
-  //   classes ".gl-button.btn-link" to make it more specific
-  //   and avoid having the size overriden
-  //
-  //   See https://gitlab.com/gitlab-org/gitlab/-/issues/320737
-  button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle,
-  .stage-cell button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle svg {
-    height: $ci-action-icon-size-lg;
-    width: $ci-action-icon-size-lg;
-  }
 }
 
 .merge-request-details .file-finder-overlay.diff-file-finder {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index af9f10c9a26..a7ed7172f5f 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -329,16 +329,6 @@ table.u2f-registrations {
   }
 }
 
-.email-badge {
-  display: inline;
-  margin-right: $gl-padding / 2;
-
-  .email-badge-email {
-    display: inline;
-    margin-right: $gl-padding / 4;
-  }
-}
-
 .edit-user {
   svg {
     fill: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 2e6c6a021f8..4c31cc6e111 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -321,6 +321,51 @@ input[type='checkbox']:hover {
   }
 }
 
+// This overrides parts of the Project File View CSS
+// We leverage most of the styling but broke off
+// from how we were doing it in `shared/file_highlight`
+#search-blob-content {
+  .line_holder {
+    pre {
+      padding: 0; // This overrides the existing style that will add space between each line.
+    }
+
+    svg {
+      float: none; // We have more than one icon on this implementation and don't want to float them.
+      margin: 0; // We will manage the margin with GitLab UI utility classes
+    }
+
+    .line-numbers {
+      padding: 0; // This overrides the existing style that will add space between each line.
+      min-width: 6.5rem; // Ensure our numbers fit
+
+      .diff-line-num {
+        a {
+          transition: none; // There will be a hover transition from theme, blue, darkened
+        }
+      }
+    }
+
+    &:hover {
+      svg {
+        visibility: visible; // We want to show the icons when the any part of the line is hovered
+      }
+    }
+
+    // The icons only appear on hover
+    // So on mobile we can hide them and retake the space for the code blob
+    @include media-breakpoint-down(sm) {
+      svg {
+        display: none;
+      }
+
+      .line-numbers {
+        min-width: 4rem;
+      }
+    }
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index efa4b04ee62..c9ff8205142 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -407,6 +407,34 @@ h1 {
 .gl-form-input.form-control::placeholder {
   color: #868686;
 }
+.gl-icon {
+  fill: currentColor;
+}
+.gl-icon.s12 {
+  width: 12px;
+  height: 12px;
+}
+.gl-icon.s16 {
+  width: 16px;
+  height: 16px;
+}
+.gl-icon.s32 {
+  width: 32px;
+  height: 32px;
+}
+.gl-link {
+  font-size: 0.875rem;
+  color: #428fdc;
+}
+.gl-link:active {
+  color: #9dc7f1;
+}
+.gl-link:active {
+  text-decoration: underline;
+  box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.4),
+    0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
 .gl-button {
   display: inline-flex;
 }
@@ -439,6 +467,29 @@ h1 {
   outline: none;
   background-color: #404040;
 }
+.gl-button.gl-button.btn-default:active .gl-icon,
+.gl-button.gl-button.btn-default.active .gl-icon {
+  color: #fafafa;
+}
+.gl-button.gl-button.btn-default .gl-icon {
+  color: #999;
+}
+.gl-search-box-by-type-search-icon {
+  margin: 0.5rem;
+  color: #999;
+  width: 1rem;
+  position: absolute;
+}
+.gl-search-box-by-type {
+  display: flex;
+  position: relative;
+}
+.gl-search-box-by-type-input,
+.gl-search-box-by-type-input.gl-form-input {
+  height: 2rem;
+  padding-right: 2rem;
+  padding-left: 1.75rem;
+}
 body,
 .form-control,
 .search form {
@@ -912,9 +963,9 @@ input {
   background-color: #9e5400;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1139,6 +1190,11 @@ input {
   border-right: 0.25rem solid #fff;
   border-right-color: var(--black, #fff);
 }
+@media (min-width: 576px) {
+  .nav-sidebar a.has-sub-items + .sidebar-sub-level-items {
+    min-width: 150px;
+  }
+}
 .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
@@ -1329,6 +1385,12 @@ input {
   font-weight: 400;
   color: #9dc7f1;
 }
+.sidebar-top-level-items li > a.gl-link {
+  color: #fafafa;
+}
+.sidebar-top-level-items li > a.gl-link:active {
+  text-decoration: none;
+}
 .sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
@@ -1770,6 +1832,7 @@ body.gl-dark .header-search svg {
 body.gl-dark .header-search input {
   background-color: transparent;
   color: rgba(250, 250, 250, 0.8);
+  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
 }
 body.gl-dark .header-search input::placeholder {
   color: rgba(250, 250, 250, 0.8);
@@ -1826,6 +1889,9 @@ body.gl-dark .navbar-gitlab .search form:active {
   background-color: var(--gray-100);
   box-shadow: inset 0 0 0 1px var(--blue-200);
 }
+body.gl-dark .navbar-gitlab .search form .search-input {
+  color: var(--gl-text-color);
+}
 
 body.gl-dark {
   --gray-10: #1f1f1f;
@@ -1948,6 +2014,9 @@ body.gl-dark {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 977f994dc78..a57202515ad 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -388,6 +388,34 @@ h1 {
 .gl-form-input.form-control::placeholder {
   color: #868686;
 }
+.gl-icon {
+  fill: currentColor;
+}
+.gl-icon.s12 {
+  width: 12px;
+  height: 12px;
+}
+.gl-icon.s16 {
+  width: 16px;
+  height: 16px;
+}
+.gl-icon.s32 {
+  width: 32px;
+  height: 32px;
+}
+.gl-link {
+  font-size: 0.875rem;
+  color: #1f75cb;
+}
+.gl-link:active {
+  color: #0b5cad;
+}
+.gl-link:active {
+  text-decoration: underline;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4),
+    0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
 .gl-button {
   display: inline-flex;
 }
@@ -420,6 +448,29 @@ h1 {
   outline: none;
   background-color: #dbdbdb;
 }
+.gl-button.gl-button.btn-default:active .gl-icon,
+.gl-button.gl-button.btn-default.active .gl-icon {
+  color: #303030;
+}
+.gl-button.gl-button.btn-default .gl-icon {
+  color: #666;
+}
+.gl-search-box-by-type-search-icon {
+  margin: 0.5rem;
+  color: #666;
+  width: 1rem;
+  position: absolute;
+}
+.gl-search-box-by-type {
+  display: flex;
+  position: relative;
+}
+.gl-search-box-by-type-input,
+.gl-search-box-by-type-input.gl-form-input {
+  height: 2rem;
+  padding-right: 2rem;
+  padding-left: 1.75rem;
+}
 body,
 .form-control,
 .search form {
@@ -893,9 +944,9 @@ input {
   background-color: #d99530;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1120,6 +1171,11 @@ input {
   border-right: 0.25rem solid #000;
   border-right-color: var(--black, #000);
 }
+@media (min-width: 576px) {
+  .nav-sidebar a.has-sub-items + .sidebar-sub-level-items {
+    min-width: 150px;
+  }
+}
 .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
@@ -1310,6 +1366,12 @@ input {
   font-weight: 400;
   color: #0b5cad;
 }
+.sidebar-top-level-items li > a.gl-link {
+  color: #303030;
+}
+.sidebar-top-level-items li > a.gl-link:active {
+  text-decoration: none;
+}
 .sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
@@ -1626,6 +1688,9 @@ svg.s16 {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 2b5751cab36..bb9a9cf0497 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -122,6 +122,10 @@ body.gl-dark {
           background-color: var(--gray-100);
           box-shadow: inset 0 0 0 1px var(--blue-200);
         }
+
+        .search-input {
+          color: var(--gl-text-color);
+        }
       }
     }
   }
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 1332686a906..e119af716a6 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -154,6 +154,7 @@
     input {
       background-color: transparent;
       color: rgba($search-and-nav-links, 0.8);
+      box-shadow: inset 0 0 0 1px rgba($search-and-nav-links, 0.4);
 
       &::placeholder {
         color: rgba($search-and-nav-links, 0.8);
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 7e46f16e1d0..2623de80fe9 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -226,6 +226,16 @@ $gl-line-height-42: px-to-rem(42px);
   max-height: none !important;
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1655
+.gl-max-w-62 {
+  max-width: $grid-size * 62;
+}
+
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1655
+.gl-max-w-26 {
+  max-width: $grid-size * 26;
+}
+
 .gl-max-w-50p {
   max-width: 50%;
 }
@@ -291,9 +301,9 @@ $gl-line-height-42: px-to-rem(42px);
   @include gl-focus($gl-border-size-1, $gray-900, true);
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2476
-.gl-md-max-w-50p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 50%;
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1637
+.gl-lg-w-25p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 25%;
   }
 }