Pin selection summary/list header to the page top

- create class that sets the header immediately below the header
  and performance bar and updates the height depending on if
  the selection summary is visible or not

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_layout.vue

@@ -23,7 +23,7 @@ export default {
     <section
       v-if="hasStickySlot"
       data-testid="sticky-section"
-      class="position-sticky gl-z-index-2 security_dashboard_filters"
+      class="position-sticky gl-z-index-2 security-dashboard-filters"
     >
       <slot name="sticky"></slot>
     </section>

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -70,10 +70,13 @@ export default {
       return this.shouldShowSelection && Boolean(this.numOfSelectedVulnerabilities);
     },
     checkboxClass() {
-      return this.shouldShowSelection ? '' : 'd-none';
+      return this.shouldShowSelection ? '' : 'gl-display-none';
+    },
+    theadClass() {
+      return this.shouldShowSelectionSummary ? 'below-selection-summary' : '';
     },
     fields() {
-      const commonThClass = ['table-th-transparent', 'original-gl-th'].join(' ');
+      const commonThClass = ['table-th-transparent', 'original-gl-th', 'gl-bg-white!'].join(' ');
       return [
         {
           key: 'checkbox',
@@ -154,7 +157,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="vulnerability-list">
     <selection-summary
       v-if="shouldShowSelectionSummary"
       :selected-vulnerabilities="Object.values(selectedVulnerabilities)"
@@ -165,6 +168,7 @@ export default {
       :busy="isLoading"
       :fields="fields"
       :items="vulnerabilities"
+      :thead-class="theadClass"
       stacked="sm"
       show-empty
       responsive

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

+$security-filter-height: 90px;
+$selection-summary-height: 68px;
+
+@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;
@@ -23,10 +34,26 @@
   }
 }
 
-.security_dashboard_filters {
-  top: $header-height;
+.security-dashboard-filters {
+  @include sticky-top-positioning();
+}
 
-  .with-performance-bar & {
-    top: $header-height + $performance-bar-height;
+// 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
+.vulnerability-list {
+  .card,
+  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);
   }
 }

ee/changelogs/unreleased/215355-pin-header.yml

+---
+title: Pin selection summary/list header to the page top
+merge_request: 33875
+author:
+type: added

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -74,8 +74,8 @@ describe('Vulnerability list component', () => {
     });
 
     it('should not show the checkboxes if shouldShowSelection is passed in', () => {
-      expect(findCheckAllCheckboxCell().classes()).toContain('d-none');
-      expect(findFirstCheckboxCell().classes()).toContain('d-none');
+      expect(findCheckAllCheckboxCell().classes()).toContain('gl-display-none');
+      expect(findFirstCheckboxCell().classes()).toContain('gl-display-none');
     });
   });