make GridList table header sticky using header div height

client/src/components/Grid/GridList.vue

@@ -7,6 +7,8 @@ import { BAlert, BButton, BCard, BFormCheckbox, BOverlay, BPagination } from "bo
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
+
 import { BatchOperation, FieldEntry, FieldHandler, GridConfig, Operation, RowData } from "./configs/types";
 
 import HelpText from "../Help/HelpText.vue";
@@ -61,6 +63,10 @@ const props = withDefaults(defineProps<Props>(), {
 // contains the current grid data provided by the corresponding api endpoint
 const gridData = ref();
 
+// element refs
+const gridHeader = ref<HTMLDivElement | null>(null);
+const { height: gridHeaderHeight } = useAnimationFrameSize(gridHeader);
+
 // message references
 const errorMessage = ref("");
 const operationMessage = ref("");
@@ -327,7 +333,7 @@ watch(operationMessage, () => {
     <div :id="gridConfig.id" class="d-flex flex-column overflow-auto">
         <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
         <BAlert v-if="!!operationMessage" :variant="operationStatus" fade show>{{ operationMessage }}</BAlert>
-        <div class="grid-header d-flex justify-content-between pb-2 flex-column">
+        <div ref="gridHeader" class="grid-header d-flex justify-content-between pb-2 flex-column">
             <div v-if="!embedded" class="d-flex">
                 <Heading h1 separator inline size="xl" class="flex-grow-1 m-0" data-description="grid title">
                     <span v-localize>{{ gridConfig.title }}</span>
@@ -390,7 +396,7 @@ watch(operationMessage, () => {
         </span>
         <BOverlay v-else :show="resultsLoading" rounded="sm">
             <table class="grid-table">
-                <thead>
+                <thead class="grid-header" :style="{ top: `${gridHeaderHeight}px` }">
                     <th v-if="!!gridConfig.batch">
                         <BFormCheckbox
                             class="m-2"