Merge branch 'dpisek-fix-graphql-pipeline-vuln-list-styling' into 'master'

Pipeline Vulnerabilities: Fix layout issue for GraphQL list

See merge request gitlab-org/gitlab!66880

ee/app/assets/stylesheets/components/vulnerability_list.scss

+$security-filter-height: 90px;
+$selection-summary-height: 66px;
+$selection-summary-with-error-height: 118px;
+
+@mixin sticky-top-positioning($extra: 0) {
+  top: $header-height + $extra;
+
+  .with-performance-bar & {
+    top: $header-height + $performance-bar-height + $extra;
+  }
+}
+
+.security-dashboard-filters {
+  @include sticky-top-positioning();
+}
+
+.vulnerability-list {
+  @media (min-width: $breakpoint-sm) {
+    .checkbox {
+      @include gl-pl-4;
+      @include gl-pr-0;
+      width: 1px;
+
+      + td,
+      + th {
+        @include gl-pl-4;
+      }
+    }
+
+    .detected {
+      width: 9%;
+    }
+
+    .status {
+      width: 8%;
+    }
+
+    .severity {
+      @include gl-w-10p;
+    }
+
+    .description {
+      max-width: 0;
+    }
+
+    .identifier {
+      width: 16%;
+    }
+
+    .scanner {
+      @include gl-w-10p;
+    }
+
+    .activity {
+      width: 5%;
+    }
+  }
+
+  // Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
+  // the property is assigned to the th element as a workaround
+  .selection-summary,
+  thead th {
+    @include gl-sticky;
+    // Some input elements have a z-index of "1" so we need to place this higher
+    @include gl-z-index-2;
+    @include sticky-top-positioning($security-filter-height);
+  }
+
+  thead th {
+    box-shadow: 0 1px $gray-100;
+  }
+
+  thead.below-selection-summary th {
+    @include sticky-top-positioning($security-filter-height + $selection-summary-height);
+  }
+
+  tr:hover .vulnerability-title {
+    @include gl-text-decoration-underline;
+  }
+
+  .card.with-error + table thead.below-selection-summary th {
+    @include sticky-top-positioning($security-filter-height + $selection-summary-with-error-height);
+  }
+}

ee/app/assets/stylesheets/page_bundles/pipeline.scss

 @import '../../../../../app/assets/stylesheets/page_bundles/pipeline';
+@import '../components/vulnerability_list';
 @import '../components/generic_vulnerability_report';
 
 /**

ee/app/assets/stylesheets/page_bundles/security_dashboard.scss

 @import 'page_bundles/mixins_and_variables_and_functions';
+@import '../components/vulnerability_list';
 @import '../components/generic_vulnerability_report';
 
-$security-filter-height: 90px;
-$selection-summary-height: 66px;
-$selection-summary-with-error-height: 118px;
-
-@mixin sticky-top-positioning($extra: 0) {
-  top: $header-height + $extra;
-
-  .with-performance-bar & {
-    top: $header-height + $performance-bar-height + $extra;
-  }
-}
-
 .vulnerabilities-row {
   &.dismissed .table-mobile-content:not(.action-buttons) {
     opacity: 0.5;
@@ -38,10 +27,6 @@ $selection-summary-with-error-height: 118px;
   }
 }
 
-.security-dashboard-filters {
-  @include sticky-top-positioning();
-}
-
 .security-dashboard-accordion > ul {
   @include gl-display-flex;
   @include gl-flex-grow-1;
@@ -51,72 +36,3 @@ $selection-summary-with-error-height: 118px;
   flex: 1 1 40%;
   margin: 1rem;
 }
-
-.vulnerability-list {
-  @media (min-width: $breakpoint-sm) {
-    .checkbox {
-      padding-left: $gl-spacing-scale-4;
-      padding-right: 0;
-      width: 1px;
-
-      + td,
-      + th {
-        padding-left: $gl-spacing-scale-4;
-      }
-    }
-
-    .detected {
-      width: 9%;
-    }
-
-    .status {
-      width: 8%;
-    }
-
-    .severity {
-      width: 10%;
-    }
-
-    .description {
-      max-width: 0;
-    }
-
-    .identifier {
-      width: 16%;
-    }
-
-    .scanner {
-      width: 10%;
-    }
-
-    .activity {
-      width: 5%;
-    }
-  }
-
-  // Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
-  // the property is assigned to the th element as a workaround
-  .selection-summary,
-  thead th {
-    position: -webkit-sticky;
-    position: sticky;
-    z-index: 1;
-    @include sticky-top-positioning($security-filter-height);
-  }
-
-  thead th {
-    box-shadow: 0 1px $gray-100;
-  }
-
-  thead.below-selection-summary th {
-    @include sticky-top-positioning($security-filter-height + $selection-summary-height);
-  }
-
-  tr:hover .vulnerability-title {
-    text-decoration: underline;
-  }
-
-  .card.with-error + table thead.below-selection-summary th {
-    @include sticky-top-positioning($security-filter-height + $selection-summary-with-error-height);
-  }
-}