Stick the filter

Author: johnsimons

src/Frontend/src/components/messages2/HeadersView.vue

@@ -22,15 +22,11 @@ const filteredHeaders = computed(() => {
 </script>
 
 <template>
-  <div>
-    <div class="row filters">
-      <div class="col">
-        <div class="text-search-container">
-          <div class="text-search">
-            <div>
-              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
-            </div>
-          </div>
+  <div class="filters">
+    <div class="text-search-container">
+      <div class="text-search">
+        <div>
+          <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
         </div>
       </div>
     </div>
@@ -77,6 +73,9 @@ const filteredHeaders = computed(() => {
   max-width: 40rem;
 }
 .filters {
+  top: -2.3rem;
+  position: sticky;
+  z-index: 100;
   background-color: #f3f3f3;
   margin-top: 5px;
   border: #8c8c8c 1px solid;