Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

4 files changed, 38 insertions, 76 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index df78543f96d..8f65f349cf9 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -146,13 +146,6 @@
      *  Blame file
      */
     &.blame {
-      //
-      // IMPORTANT PERFORMANCE OPTIMIZATION
-      //
-      // When viewinng a blame with many commits a lot of content is rendered on the page.
-      // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
-      content-visibility: auto;
-
       table {
         border: 0;
         margin: 0;
@@ -167,12 +160,6 @@
       }
 
       td {
-        //
-        // IMPORTANT PERFORMANCE OPTIMIZATION
-        //
-        // When viewinng a blame with many commits a lot of content is rendered on the page.
-        // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
-        content-visibility: auto;
         border-top: 0;
         border-bottom: 0;
 
@@ -235,6 +222,25 @@
           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/kbd.scss b/app/assets/stylesheets/framework/kbd.scss
index 05991bc16fd..7dd0ae47834 100644
--- a/app/assets/stylesheets/framework/kbd.scss
+++ b/app/assets/stylesheets/framework/kbd.scss
@@ -12,4 +12,20 @@ kbd {
   border-image: none;
   border-radius: 3px;
   box-shadow: 0 -1px 0 var(--gray-200, $gray-200) inset;
+
+  &.flat {
+    color: $code-color;
+    background-color: $gray-100;
+    border-color: var(--gray-10, $gray-10) var(--gray-10, $gray-10) var(--gray-50, $gray-50);
+    box-shadow: none;
+    border-radius: $border-radius-default;
+    font-family: $monospace-font;
+    font-size: $gl-font-size-small;
+    line-height: 1;
+    white-space: pre-wrap;
+    // Safari
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: keep-all;
+  }
 }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index ef294635641..9b04b9a2612 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -82,11 +82,11 @@
 .nav-links {
   li.md-header-toolbar {
     margin-left: auto;
-    display: none;
+    visibility: hidden;
     padding-bottom: $gl-padding-8;
 
     &.active {
-      display: block;
+      visibility: visible;
 
       @include media-breakpoint-down(xs) {
         flex: none;
@@ -116,7 +116,7 @@
 }
 
 .md-preview-holder {
-  min-height: 167px;
+  min-height: 172px;
   padding: 10px 0;
   overflow-x: auto;
 }
diff --git a/app/assets/stylesheets/framework/terms.scss b/app/assets/stylesheets/framework/terms.scss
deleted file mode 100644
index b07d6023127..00000000000
--- a/app/assets/stylesheets/framework/terms.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.terms {
-  .with-performance-bar & {
-    margin-top: 0;
-  }
-
-  .alert-wrapper {
-    min-height: $header-height + $gl-padding;
-  }
-
-  .content {
-    padding-top: $gl-padding;
-  }
-
-  .card {
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      line-height: $line-height-base;
-
-      .logo-text {
-        width: 55px;
-        height: 24px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .navbar-collapse {
-        padding-right: 0;
-        flex-grow: 0;
-        flex-basis: auto;
-
-        .navbar-nav {
-          margin: 0;
-        }
-      }
-
-      .nav li {
-        float: none;
-      }
-    }
-
-    .panel-content {
-      padding: $gl-padding;
-
-      *:first-child {
-        margin-top: 0;
-      }
-
-      *:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .footer-block {
-      margin: 0;
-    }
-  }
-}