make filter styles consistent

Author: PhilBastian

src/Frontend/src/components/FilterInput.vue

@@ -21,7 +21,7 @@ watch(localInput, (newValue) => {
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control-static filter-input" v-model="localInput" />
+    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control filter-input" v-model="localInput" />
   </div>
 </template>
 

src/Frontend/src/components/monitoring/MonitoringFilter.vue

@@ -16,13 +16,6 @@ const monitoringStore = useMonitoringStore();
 </template>
 
 <style scoped>
-.form-control-static {
-  min-height: 34px;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  margin-bottom: 0;
-}
-
 .filter-group.filter-monitoring {
   width: 100%;
   margin-top: 0.5em;

src/Frontend/src/views/HeartbeatsView.vue

@@ -82,13 +82,6 @@ const isMassTransitConnected = useIsMassTransitConnected();
   padding: 0;
 }
 
-.form-control-static {
-  min-height: 34px;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  margin-bottom: 0;
-}
-
 .filter-group > *:not(:first-child) {
   margin-left: 1.5em;
 }

src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue

@@ -13,6 +13,7 @@ import { useShowToast } from "@/composables/toast";
 import ResultsCount from "@/components/ResultsCount.vue";
 import { useHiddenFeature } from "./useHiddenFeature";
 import { license } from "@/composables/serviceLicense";
+import FilterInput from "@/components/FilterInput.vue";
 
 enum NameFilterType {
   beginsWith = "Begins with",
@@ -101,10 +102,6 @@ async function loadData() {
   data.value = results.filter((row) => row.is_known_endpoint === (props.source === DataSource.WellKnownEndpoint));
 }
 
-function nameFilterChanged(event: Event) {
-  filterData.name = (event.target as HTMLInputElement).value;
-}
-
 function sortChanged(item: Item) {
   filterData.sort = item.value;
 }
@@ -177,7 +174,7 @@ async function save() {
             </select>
           </div>
           <div>
-            <input type="search" aria-label="Filter by name" class="form-control format-text" :value="filterData.name" @input="nameFilterChanged" placeholder="Filter by name..." />
+            <FilterInput v-model="filterData.name" />
           </div>
         </div>
       </div>