Add labels to selectors, and adjust css

+ Adjusting filter elements with flex-grow properties

app/views/admin/products_v3/_filters.html.haml

@@ -3,8 +3,10 @@
     .search-input
       = text_field_tag :search_term, search_term, placeholder: t('.search_products')
   .producers
+    .label= t('.producers.label')
     = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers')
   .categories
+    .label= t('.categories.label')
     = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories')
   .submit
     .search-button

app/webpacker/css/admin/products_v3.scss

@@ -100,8 +100,30 @@
 
   #filters {
     gap: 20px;
+    align-items: flex-end;
+
+    .producers,
+    .categories {
+      > .label {
+        margin-left: 3px;
+        margin-bottom: 2px;
+      }
+    }
+
+    .query {
+      flex-grow: 1;
+    }
+
+    .producers,
+    .categories {
+      flex-grow: 0;
+    }
+
+    .submit {
+      flex-grow: 0;
+    }
+
     .query {
-      flex-grow: 2;
       .search-input {
         width: 100%;
         position: relative;
@@ -131,8 +153,15 @@
         }
       }
     }
+
+    .producers,
+    .categories {
+      select {
+        width: 150px;
+      }
+    }
+
     .submit {
-      flex-grow: 1;
       text-align: right;
 
       .search-button {

config/locales/en.yml

@@ -777,6 +777,10 @@ en:
         search_products: Search for products
         all_producers: All producers
         all_categories: All categories
+        producers:
+          label: Producers
+        categories:
+          label: Categories
         search: Search
       content:
         no_products_found: No products found