styles changes

src/views/CollectionView.vue

@@ -26,22 +26,21 @@ onMounted(() => {
   fetchMerch()
 })
 
-const searchQuery = ref('');
-
+const searchQuery = ref('')
 
 const filteredMerch = computed(() => {
   if (!searchQuery.value.trim()) {
-    return merchList.value;
+    return merchList.value
   }
-  const q = searchQuery.value.toLowerCase();
-  return merchList.value.filter(item =>
-    item.name.toLowerCase().includes(q)
-  );
-});
+  const q = searchQuery.value.toLowerCase()
+  return merchList.value.filter((item) => item.name.toLowerCase().includes(q))
+})
 </script>
 
 <template>
-  <CollectionToolbar v-model="searchQuery" />
+  <div class="sticky-search-container">
+    <CollectionToolbar v-model="searchQuery" />
+  </div>
   <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
     <n-gi class="grid-item" v-for="item in filteredMerch" :key="item.merch_uuid">
       <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
@@ -51,6 +50,4 @@ const filteredMerch = computed(() => {
   </n-grid>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>