Fix scrolling issues with sticky header

- Add changelog

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

@@ -95,31 +95,30 @@ export default {
 </script>
 
 <template>
-  <div>
-    <gl-alert v-if="updateErrorText" variant="danger" :dismissible="false" class="gl-mb-3">
+  <div class="card gl-z-index-2!" :class="{ 'with-error': Boolean(updateErrorText) }">
+    <gl-alert v-if="updateErrorText" variant="danger" :dismissible="false">
       {{ updateErrorText }}
     </gl-alert>
-    <div class="card gl-z-index-3!">
-      <form class="card-body gl-display-flex gl-align-items-center" @submit.prevent="handleSubmit">
-        <div
-          class="gl-line-height-0 gl-border-r-solid gl-border-gray-100 gl-pr-6 gl-border-1 gl-h-7 gl-display-flex gl-align-items-center"
+
+    <form class="card-body gl-display-flex gl-align-items-center" @submit.prevent="handleSubmit">
+      <div
+        class="gl-line-height-0 gl-border-r-solid gl-border-gray-100 gl-pr-6 gl-border-1 gl-h-7 gl-display-flex gl-align-items-center"
+      >
+        <span
+          ><b>{{ selectedVulnerabilitiesCount }}</b> {{ $options.i18n.selected }}</span
         >
-          <span
-            ><b>{{ selectedVulnerabilitiesCount }}</b> {{ $options.i18n.selected }}</span
-          >
-        </div>
-        <div class="gl-flex-fill-1 gl-ml-6 gl-mr-4">
-          <status-dropdown @change="handleStatusDropdownChange" />
-        </div>
-        <template v-if="shouldShowActionButtons">
-          <gl-button type="button" class="gl-mr-4" @click="resetSelected">
-            {{ $options.i18n.cancel }}
-          </gl-button>
-          <gl-button type="submit" category="primary" variant="confirm">
-            {{ $options.i18n.changeStatus }}
-          </gl-button>
-        </template>
-      </form>
-    </div>
+      </div>
+      <div class="gl-flex-fill-1 gl-ml-6 gl-mr-4">
+        <status-dropdown @change="handleStatusDropdownChange" />
+      </div>
+      <template v-if="shouldShowActionButtons">
+        <gl-button type="button" class="gl-mr-4" @click="resetSelected">
+          {{ $options.i18n.cancel }}
+        </gl-button>
+        <gl-button type="submit" category="primary" variant="confirm">
+          {{ $options.i18n.changeStatus }}
+        </gl-button>
+      </template>
+    </form>
   </div>
 </template>

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

 @import 'page_bundles/mixins_and_variables_and_functions';
 
 $security-filter-height: 90px;
-$selection-summary-height: 68px;
+$selection-summary-height: 66px;
+$selection-summary-with-error-height: 118px;
 
 @mixin sticky-top-positioning($extra: 0) {
   top: $header-height + $extra;
@@ -113,4 +114,8 @@ $selection-summary-height: 68px;
   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);
+  }
 }

ee/changelogs/unreleased/292636-fix-scroll-issue.yml

+---
+title: Fix scrolling issues with sticky status box
+merge_request: 55188
+author:
+type: fixed