Улучшен UX компонента поиска товаров - большая заметная строка поиска

- Убран заголовок блока
- Строка поиска теперь большая (form-control-lg) и занимает всю ширину
- Добавлена иконка поиска слева от input
- Заголовок перенесен в placeholder строки поиска
- Переключатель вида теперь стандартного размера (не sm)
- Более чистый и современный UI

myproject/products/templates/products/components/product_search_picker.html

@@ -46,20 +46,19 @@ ProductSearchPicker.init('#writeoff-products', {
      {% if warehouse_id %}data-warehouse-id="{{ warehouse_id }}"{% endif %}>
 
     <div class="card shadow-sm">
-        <!-- Заголовок -->
+        <!-- Строка поиска -->
-        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
+        <div class="card-header bg-white py-3">
-            <strong>
-                <i class="bi bi-box-seam text-primary"></i>
-                {{ title|default:'Выбор товара' }}
-            </strong>
-
             <div class="d-flex gap-2 align-items-center flex-wrap">
-                <!-- Поиск -->
+                <!-- Поиск - большой и заметный -->
-                <div class="input-group" style="width: 250px;">
+                <div class="input-group flex-grow-1">
+                    <span class="input-group-text bg-light border-end-0">
+                        <i class="bi bi-search text-primary"></i>
+                    </span>
                     <input type="text"
-                           class="form-control form-control-sm product-picker-search"
+                           class="form-control form-control-lg border-start-0 product-picker-search"
-                           placeholder="Поиск по названию, артикулу...">
+                           placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}"
-                    <button class="btn btn-outline-secondary btn-sm product-picker-search-clear"
+                           style="box-shadow: none;">
+                    <button class="btn btn-outline-secondary product-picker-search-clear"
                             type="button" style="display: none;">
                         <i class="bi bi-x-lg"></i>
                     </button>
@@ -67,7 +66,7 @@ ProductSearchPicker.init('#writeoff-products', {
 
                 {% if show_view_toggle|default:True %}
                 <!-- Переключатель вида -->
-                <div class="btn-group btn-group-sm">
+                <div class="btn-group">
                     <button class="btn btn-outline-secondary product-picker-view"
                             data-view="grid" title="Карточки">
                         <i class="bi bi-grid-3x3-gap"></i>