fix styling to match rest of SP

Author: PhilBastian

src/Frontend/src/components/audit/DatePickerRange.vue

@@ -42,9 +42,9 @@ function formatDate([fromDate, toDate]: DateRange) {
 </script>
 
 <template>
-  <VueDatePicker ref="datePicker" v-model="internalModel" :format="formatDate" :range="{ partialRange: false }" :enable-seconds="true" :action-row="{ showNow: false, showCancel: false, showSelect: true }">
+  <VueDatePicker ref="datePicker" class="dropdown" v-model="internalModel" :format="formatDate" :range="{ partialRange: false }" :enable-seconds="true" :action-row="{ showNow: false, showCancel: false, showSelect: true }">
     <template #trigger>
-      <button type="button" class="btn btn-dropdown dropdown-toggle">
+      <button type="button" class="btn btn-dropdown dropdown-toggle sp-btn-menu">
         {{ displayDataRange }}
       </button>
     </template>
@@ -53,3 +53,9 @@ function formatDate([fromDate, toDate]: DateRange) {
     </template>
   </VueDatePicker>
 </template>
+
+<style>
+.dropdown .btn {
+  padding-left: 0.5rem;
+}
+</style>

src/Frontend/src/components/audit/ListFilterSelector.vue

@@ -33,7 +33,7 @@ function setFilter(item: string, isSelected: boolean) {
 
 <template>
   <div class="dropdown">
-    <button type="button" aria-label="open dropdown menu" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" aria-label="open dropdown menu" class="btn btn-dropdown dropdown-toggle sp-btn-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="wrap-text">{{ selected || defaultEmptyText }}</span>
     </button>
     <div class="dropdown-menu wrapper">
@@ -106,4 +106,8 @@ function setFilter(item: string, isSelected: boolean) {
 .selected {
   margin-left: 0.375rem;
 }
+
+.dropdown .btn {
+  padding-left: 0.5rem;
+}
 </style>