feat(catalog-ui): align search buttons to the right in filter panels

Author: Adrien

apps/catalog-ui/src/components/smart-filter/DateSearchFilterPanel.vue

@@ -89,12 +89,15 @@
       data-cy="date-search-filter-panel_operators"
     />
 
-    <q-btn
-      v-bind="uiProps.searchButton"
-      :label="t('searchButton')"
-      data-cy="date-search-filter-panel_search"
-      @click="onSearch"
-    />
+    <div class="row justify-end">
+      <q-btn
+        v-bind="uiProps.searchButton"
+        :label="t('searchButton')"
+        data-cy="date-search-filter-panel_search"
+        class="q-mt-sm date-search-filter-panel_search"
+        @click="onSearch"
+      />
+    </div>
   </div>
   <!-- v8 ignore stop -->
 </template>

apps/catalog-ui/src/components/smart-filter/ListSearchFilterPanel.vue

@@ -45,13 +45,16 @@
         </q-item-section>
       </q-item>
     </q-list>
-    <q-btn
-      v-bind="uiProps.filterButton"
-      :label="t('searchButton')"
-      data-cy="button_search"
-      class="search-button"
-      @click="onSearch"
-    />
+
+    <div class="row justify-end">
+      <q-btn
+        v-bind="uiProps.filterButton"
+        :label="t('searchButton')"
+        data-cy="list-search-filter-panel_search"
+        class="q-mt-sm list-search-filter-panel_search"
+        @click="onSearch"
+      />
+    </div>
   </div>
   <!-- v8 ignore stop -->
 </template>

apps/catalog-ui/src/components/smart-filter/NumberSearchFilterPanel.vue

@@ -57,12 +57,15 @@
       data-cy="number-search-filter-panel_operators"
     />
 
-    <q-btn
-      v-bind="uiProps.searchButton"
-      :label="t('searchButton')"
-      data-cy="number-search-filter-panel_search"
-      @click="onSearch"
-    />
+    <div class="row justify-end">
+      <q-btn
+        v-bind="uiProps.searchButton"
+        :label="t('searchButton')"
+        data-cy="number-search-filter-panel_search"
+        class="q-mt-sm number-search-filter-panel_search"
+        @click="onSearch"
+      />
+    </div>
   </div>
 </template>
 

apps/catalog-ui/src/components/smart-filter/TextSearchFilterPanel.vue

@@ -57,12 +57,15 @@
       data-cy="text-search-filter-panel_operators"
     />
 
-    <q-btn
-      v-bind="uiProps.searchButton"
-      :label="t('searchButton')"
-      data-cy="text-search-filter-panel_search"
-      @click="onSearch"
-    />
+    <div class="row justify-end">
+      <q-btn
+        v-bind="uiProps.searchButton"
+        :label="t('searchButton')"
+        data-cy="text-search-filter-panel_search"
+        class="q-mt-sm text-search-filter-panel_search"
+        @click="onSearch"
+      />
+    </div>
   </div>
   <!-- v8 ignore stop -->
 </template>

apps/catalog-ui/src/components/smart-filter/TreeSearchFilterPanel.vue

@@ -35,13 +35,16 @@
       :nodes="items"
       :node-types="[]"
     />
-    <q-btn
-      v-bind="uiProps.searchButton"
-      :label="t('searchButton')"
-      data-cy="button_search"
-      class="search-button"
-      @click="onSearch"
-    />
+
+    <div class="row justify-end">
+      <q-btn
+        v-bind="uiProps.searchButton"
+        :label="t('searchButton')"
+        data-cy="tree-search-filter-panel_search"
+        class="q-mt-sm tree-search-filter-panel_search"
+        @click="onSearch"
+      />
+    </div>
   </div>
   <!-- v8 ignore stop -->
 </template>