Fix scrolling issues with sticky header

- Add changelog

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

@@ -95,11 +95,11 @@ 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"
@@ -121,5 +121,4 @@ export default {
       </template>
     </form>
   </div>
-  </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