Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

23 files changed, 176 insertions, 117 deletions

diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
index a6ecca88bd4..a023b41083d 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@@ -26,7 +26,36 @@ Usage:
   src: font-url('jetbrains-mono/JetBrainsMono.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: bold;
+  src: font-url('jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: normal;
+  font-style: italic;
+  src: font-url('jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: bold;
+  font-style: italic;
+  src: font-url('jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2');
+}
+
 :root {
   --default-mono-font: 'JetBrains Mono', 'Menlo';
   --default-regular-font: 'GitLab Sans', -apple-system;
 }
+
+// This isn't the best solution, but we needed a quick fix
+// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/
+* {
+  font-variant-ligatures: none;
+}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 07db6b3c147..e60353578b0 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -38,6 +38,7 @@
 @import 'framework/sidebar';
 @import 'framework/contextual_sidebar_header';
 @import 'framework/contextual_sidebar';
+@import 'framework/super_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 14e756a5c21..0bc920b1f73 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -471,6 +471,10 @@ img.emoji {
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
 
+.gl-icon-button:hover {
+  background-color: $gray-100;
+}
+
 .border-section {
   @include gl-py-6;
   @include gl-m-0;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 34c7ffa58fe..1e05441c731 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -138,13 +138,12 @@
 }
 
 @mixin top-level-item {
+  @include gl-h-7;
   @include gl-px-4;
-  @include gl-py-3;
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-rounded-base;
   @include gl-w-auto;
-  @include gl-line-height-normal;
   transition: none;
   margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
 
@@ -339,6 +338,7 @@
     a {
       @include top-level-item;
       @include context-header;
+      @include gl-h-auto;
     }
   }
 }
@@ -348,6 +348,7 @@
 
   .context-header a {
     @include context-header;
+    @include gl-h-auto;
   }
 
   > li {
@@ -457,9 +458,9 @@
 // PANELS-SPECIFIC
 //
 
+.icon-avatar,
 .settings-avatar {
   svg {
     margin: auto;
   }
 }
-
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 0acda85f527..65d7eafb8b8 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -851,10 +851,6 @@
         @include gl-focus($inset: true);
       }
     }
-
-    .frequent-items-list-item-container a {
-      display: flex;
-    }
   }
 
   .section-header {
@@ -873,9 +869,10 @@
 
   .frequent-items-item-title,
   .frequent-items-item-namespace {
-    max-width: 250px;
+    max-width: 220px;
     text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
   }
 
   .frequent-items-item-title {
@@ -895,6 +892,11 @@
     .frequent-items-item-metadata-container {
       float: none;
     }
+
+    .frequent-items-item-title,
+    .frequent-items-item-namespace {
+      max-width: 250px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index ea741af918c..98083fbc72a 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -37,3 +37,14 @@
     }
   }
 }
+
+.approvers-select {
+  .dropdown-menu {
+    @include gl-w-full;
+    @include gl-max-w-none;
+  }
+
+  .gl-dropdown-item-check-icon {
+    @include gl-display-none;
+  }
+}
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
new file mode 100644
index 00000000000..59a9df9ede0
--- /dev/null
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -0,0 +1,22 @@
+.super-sidebar {
+  top: 0;
+  width: $contextual-sidebar-width;
+
+  .user-bar {
+    background-color: $t-gray-a-04;
+
+    .tanuki-logo {
+      @include gl-vertical-align-middle;
+    }
+  }
+
+  .context-switcher-toggle {
+    &[aria-expanded='true'] {
+      background-color: $t-gray-a-08;
+    }
+  }
+}
+
+.with-performance-bar .super-sidebar {
+  top: $performance-bar-height;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ec8ffaf8c53..539e92eeca4 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -392,7 +392,7 @@ $gl-font-size-large: 16px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: $gray-900;
-$gl-text-color-secondary: $gray-500;
+$gl-text-color-secondary: $gray-500 !default;
 $gl-text-color-tertiary: $gray-400;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: $white;
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 2c5ea8347ae..e3cec187fab 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -339,19 +339,3 @@
     display: inline;
   }
 }
-
-.gl-select2-html5-required-fix {
-  .select2-container {
-    + .select2 {
-      @include gl-opacity-0;
-      @include gl-border-0;
-      @include gl-bg-none;
-      @include gl-bg-transparent;
-      display: block !important;
-      width: 1px;
-      height: 1px;
-      z-index: -1;
-      margin: -3px auto 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 6b976106cc9..7adbf10b83a 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -1,10 +1,7 @@
 @import 'mixins_and_variables_and_functions';
 
 .ci-status {
-  padding: 2px 7px 4px;
   border: 1px solid var(--border-color, $border-color);
-  white-space: nowrap;
-  border-radius: 4px;
 
   &:hover,
   &:focus {
diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss
index b7b698b2128..36da979ba1f 100644
--- a/app/assets/stylesheets/page_bundles/editor.scss
+++ b/app/assets/stylesheets/page_bundles/editor.scss
@@ -163,7 +163,6 @@
   .gitignore-selector,
   .gitlab-ci-yml-selector,
   .dockerfile-selector,
-  .template-type-selector,
   .metrics-dashboard-selector {
     display: inline-block;
     vertical-align: top;
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index cd5e6d32e4e..a6c08e344f9 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -1,48 +1,10 @@
 @import 'mixins_and_variables_and_functions';
 
-.import-jobs-from-col {
-  width: 37%;
-}
-
-
-.import-jobs-to-col {
-  width: 37%;
-}
-
-.import-jobs-status-col {
-  width: 25%;
-}
-
-.import-jobs-cta-col {
-  width: 1%;
-}
-
-.import-entities-target-select {
-  &.disabled {
-    .import-entities-target-select-separator {
-      color: var(--gray-400, $gray-400);
-      border-color: var(--gray-100, $gray-100);
-      background-color: var(--gray-10, $gray-10);
-    }
-  }
-
-  .import-entities-target-select-separator {
-    border-color: var(--gray-200, $gray-200);
-    background-color: var(--gray-10, $gray-10);
-  }
-
-  .gl-form-input {
-    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: calc(#{$header-height} + #{$performance-bar-height});
@@ -50,16 +12,11 @@ $import-bar-height: $gl-spacing-scale-11;
 }
 
 .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});
+      top: calc(#{$header-height} + #{$performance-bar-height} + #{$import-bar-height});
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/members.scss b/app/assets/stylesheets/page_bundles/members.scss
index 8d2c0a8ca22..826921be8f0 100644
--- a/app/assets/stylesheets/page_bundles/members.scss
+++ b/app/assets/stylesheets/page_bundles/members.scss
@@ -76,6 +76,10 @@
       width: px-to-rem(200px);
     }
 
+    .col-activity {
+      width: px-to-rem(250px);
+    }
+
     .col-actions {
       width: px-to-rem(65px);
     }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 4950561bcb7..5c699dd81df 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1002,12 +1002,12 @@ $tabs-holder-z-index: 250;
 
     .md-header {
       .gl-tab-nav-item {
-        @include gl-text-gray-900;
+        color: var(--gl-text-color, $gl-text-color);
         @include gl-pb-5;
 
         &:hover {
           @include gl-bg-none;
-          @include gl-text-gray-900;
+          color: var(--gl-text-color, $gl-text-color);
 
           &:not(.gl-tab-nav-item-active) {
             @include gl-inset-border-b-2-gray-200;
@@ -1017,7 +1017,7 @@ $tabs-holder-z-index: 250;
 
       .gl-tab-nav-item-active {
         @include gl-font-weight-bold;
-        @include gl-text-gray-900;
+        color: var(--gl-text-color, $gl-text-color);
         @include gl-inset-border-b-2-theme-accent;
 
         &:active,
@@ -1197,13 +1197,13 @@ $tabs-holder-z-index: 250;
 }
 
 .mr-section-container {
+  .media-body {
+    column-gap: 0;
+  }
+
   .state-container-action-buttons {
     @include media-breakpoint-up(md) {
       flex-direction: row-reverse;
-
-      .btn {
-        margin-left: auto;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index b995724ec7c..f08d6e3ca95 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -5,14 +5,14 @@
 }
 
 .timezone-dropdown {
-  .dropdown-menu {
-    @include gl-w-full;
-  }
-
   .gl-dropdown-item-text-primary {
     @include gl-overflow-hidden;
     @include gl-text-overflow-ellipsis;
   }
+
+  .btn-block {
+    margin-bottom: 0;
+  }
 }
 
 .modal-footer {
@@ -20,7 +20,7 @@
 }
 
 .invalid-dropdown {
-  .gl-dropdown-toggle {
+  .gl-button.gl-dropdown-toggle {
     @include inset-border-1-red-500;
 
     &:hover {
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index b35f5b38740..d4b0b4169d3 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -79,11 +79,11 @@
     @include gl-py-0;
     @include gl-px-1;
     @include gl-m-0;
-    @include gl-bg-gray-50;
     @include gl-border-0;
     @include gl-rounded-base;
     @include gl-display-inline-flex;
-    @include gl-text-body;
+    background: var(--gray-50, $gray-50);
+    color: var(--gl-text-color, $gl-text-color);
   }
 
   .gl-label-scoped {
diff --git a/app/assets/stylesheets/pages/ml_experiment_tracking.scss b/app/assets/stylesheets/pages/ml_experiment_tracking.scss
index c1582f2090b..3c025b5d23f 100644
--- a/app/assets/stylesheets/pages/ml_experiment_tracking.scss
+++ b/app/assets/stylesheets/pages/ml_experiment_tracking.scss
@@ -15,6 +15,20 @@
   }
 }
 
+table.ml-candidate-table {
+  table-layout: fixed;
+
+  tr td,
+  tr th {
+    padding: $gl-padding-8;
+
+    > * {
+      @include gl-display-block;
+      @include gl-text-truncate;
+    }
+  }
+}
+
 table.candidate-details {
   td {
     padding: $gl-spacing-scale-3;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 89be1c024db..d26e29c4047 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -63,18 +63,17 @@
     }
   }
 
+  @include media-breakpoint-down(md) {
+    .time-ago {
+      align-items: flex-end;
+    }
+  }
+
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
     margin: 0;
     white-space: nowrap;
-
-    svg {
-      width: 12px;
-      height: 12px;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
   }
 
   .build-link a {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 15a32ea8ad3..ee91d955019 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -122,7 +122,7 @@
   padding: 0;
   background: transparent;
   border: 0;
-  line-height: 34px;
+  line-height: $gl-line-height-32;
   margin: 0;
 
   a {
@@ -495,7 +495,7 @@
 
 .protected-branches-list,
 .protected-tags-list {
-  margin-bottom: 30px;
+  margin-bottom: 32px;
 
   .settings-message {
     margin: 0;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index c7e55289b11..bb83a91bc57 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -536,10 +536,11 @@ a.gl-badge.badge-warning:active {
   color: #89888d;
 }
 .gl-search-box-by-type-search-icon {
-  margin: 0.5rem;
   color: #89888d;
   width: 1rem;
   position: absolute;
+  left: 0.5rem;
+  top: calc(50% - 16px / 2);
 }
 .gl-search-box-by-type {
   display: flex;
@@ -591,7 +592,7 @@ svg {
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #89888d;
+  color: #bfbfc3;
 }
 html {
   overflow-y: scroll;
@@ -1136,15 +1137,13 @@ kbd {
 }
 .nav-sidebar li > a,
 .nav-sidebar li > .fly-out-top-item-container {
+  height: 2rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-radius: 0.25rem;
   width: auto;
-  line-height: 1rem;
   margin: 1px 8px;
 }
 .nav-sidebar li.active > a {
@@ -1373,19 +1372,18 @@ kbd {
   margin-top: 0.25rem;
 }
 .nav-sidebar-inner-scroll > div.context-header a {
+  height: 2rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-radius: 0.25rem;
   width: auto;
-  line-height: 1rem;
   margin: 1px 8px;
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0.125rem;
+  height: auto;
 }
 .nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
@@ -1398,6 +1396,7 @@ kbd {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0.125rem;
+  height: auto;
 }
 .sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
@@ -1428,7 +1427,7 @@ kbd {
   padding: 0 16px;
   background-color: #24232a;
   border: 0;
-  color: #89888d;
+  color: #bfbfc3;
   display: flex;
   align-items: center;
   background-color: #1f1e24;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index f24b6fb9e81..9e1c6b065a0 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -536,10 +536,11 @@ a.gl-badge.badge-warning:active {
   color: #737278;
 }
 .gl-search-box-by-type-search-icon {
-  margin: 0.5rem;
   color: #737278;
   width: 1rem;
   position: absolute;
+  left: 0.5rem;
+  top: calc(50% - 16px / 2);
 }
 .gl-search-box-by-type {
   display: flex;
@@ -1136,15 +1137,13 @@ kbd {
 }
 .nav-sidebar li > a,
 .nav-sidebar li > .fly-out-top-item-container {
+  height: 2rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-radius: 0.25rem;
   width: auto;
-  line-height: 1rem;
   margin: 1px 8px;
 }
 .nav-sidebar li.active > a {
@@ -1373,19 +1372,18 @@ kbd {
   margin-top: 0.25rem;
 }
 .nav-sidebar-inner-scroll > div.context-header a {
+  height: 2rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-radius: 0.25rem;
   width: auto;
-  line-height: 1rem;
   margin: 1px 8px;
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0.125rem;
+  height: auto;
 }
 .nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
@@ -1398,6 +1396,7 @@ kbd {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0.125rem;
+  height: auto;
 }
 .sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 8db91fd9908..c471d6183d8 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -115,6 +115,8 @@ $data-viz-blue-950: #e9ebff;
 
 $border-white-normal: $border-color;
 
+$gl-text-color-secondary: $gray-700;
+
 $body-bg: $gray-10;
 $input-bg: $white;
 $input-focus-bg: $white;
@@ -130,7 +132,7 @@ $popover-color: $gray-950;
 $popover-box-shadow: 0 2px 3px 1px $gray-700;
 $popover-arrow-outer-color: $gray-800;
 
-$secondary: $gray-600;
+$secondary: $gray-700;
 
 $yiq-text-dark: $gray-50;
 $yiq-text-light: $gray-950;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 714dd932147..7d98a780e55 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -236,13 +236,44 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   }
 }
 
-// TODO: Remove once https: //gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3198 is merged
-.gl-sm-ml-5 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-ml-5;
+.gl-mt-n5 {
+  margin-top: -$gl-spacing-scale-5;
+}
+
+// Utils below are very specific so cannot be part of GitLab UI
+.gl-md-mt-5 {
+  @include gl-media-breakpoint-up(md) {
+    margin-top: $gl-spacing-scale-5;
+  }
+}
+
+.gl-sm-mr-0\! {
+  @include gl-media-breakpoint-down(md) {
+    margin-right: 0 !important;
+  }
+}
+
+.gl-sm-mb-5 {
+  @include gl-media-breakpoint-down(md) {
+    margin-bottom: $gl-spacing-scale-5;
+  }
+}
+
+.gl-md-mb-3\! {
+  @include gl-media-breakpoint-up(md) {
+    margin-bottom: $gl-spacing-scale-3 !important;
   }
 }
 
+
+.gl-gap-2 {
+  gap: $gl-spacing-scale-2;
+}
+
+.gl-hover-bg-t-gray-a-08:hover {
+  background-color: $t-gray-a-08;
+}
+
 /* End gitlab-ui#1709 */
 
 /*
@@ -263,3 +294,7 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
 .gl-max-w-0 {
   max-width: 0;
 }
+
+.gl-isolate {
+  isolation: isolate;
+}