chore: Make contacts bulk action bar sticky (#12773)

# Pull Request Template

## Description

This PR makes the contacts bulk action bar sticky while scrolling.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots
<img width="1080" height="300" alt="image"
src="https://github.com/user-attachments/assets/21f8f3c6-813e-4ef6-b40a-8dd14e6ffb26"
/>
<img width="1080" height="300" alt="image"
src="https://github.com/user-attachments/assets/bb939f1d-9a13-4f9f-953d-b9872c984b74"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue

@@ -61,7 +61,7 @@ const bulkCheckboxState = computed({
   >
     <div
       v-if="hasSelected"
-      class="flex items-center justify-between gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
+      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
     >
       <div class="flex items-center gap-3">
         <div class="flex items-center gap-1.5 min-w-0">

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue

@@ -87,12 +87,15 @@ const handleAssignLabels = labels => {
 </script>
 
 <template>
+  <div
+    class="sticky top-0 z-10 bg-gradient-to-b from-n-background from-90% to-transparent px-6 pt-1 pb-2"
+  >
     <BulkSelectBar
       v-model="selectionModel"
       :all-items="allItems"
       :select-all-label="selectAllLabel"
       :selected-count-label="selectedCountLabel"
-    class="py-2 ltr:!pr-3 rtl:!pl-3"
+      class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
     >
       <template #secondary-actions>
         <Button
@@ -139,4 +142,5 @@ const handleAssignLabels = labels => {
         </div>
       </template>
     </BulkSelectBar>
+  </div>
 </template>

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

@@ -383,6 +383,15 @@ onMounted(async () => {
       </div>
 
       <template v-else>
+        <ContactsBulkActionBar
+          v-if="hasSelection"
+          :visible-contact-ids="visibleContactIds"
+          :selected-contact-ids="selectedContactIds"
+          :is-loading="isBulkActionLoading"
+          @toggle-all="toggleSelectAll"
+          @clear-selection="clearSelection"
+          @assign-labels="assignLabels"
+        />
         <ContactEmptyState
           v-if="showEmptyStateLayout"
           class="pt-14"
@@ -391,7 +400,6 @@ onMounted(async () => {
           :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
           @create="createContact"
         />
-
         <div
           v-else-if="showEmptyText"
           class="flex items-center justify-center py-10"
@@ -400,18 +408,7 @@ onMounted(async () => {
             {{ emptyStateMessage }}
           </span>
         </div>
-
+        <div v-else class="flex flex-col gap-4 px-6 pt-2 pb-6">
-        <div v-else class="flex flex-col gap-4 px-6 pt-4 pb-6">
-          <div v-if="hasSelection">
-            <ContactsBulkActionBar
-              :visible-contact-ids="visibleContactIds"
-              :selected-contact-ids="selectedContactIds"
-              :is-loading="isBulkActionLoading"
-              @toggle-all="toggleSelectAll"
-              @clear-selection="clearSelection"
-              @assign-labels="assignLabels"
-            />
-          </div>
           <ContactsList
             :contacts="contacts"
             :selected-contact-ids="selectedContactIds"