set responsive bo search bar

resources/sass/bo/base/_common.scss

@@ -52,6 +52,42 @@ body {
     width: fit-content;
 }
 
+#search-form {
+    .input-group-text {
+        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
+        border-bottom: 0;
+
+        @include media-breakpoint-up(md) {
+            border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
+            border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
+        }
+    }
+
+    .form-control {
+        @include media-breakpoint-up(md) {
+            width: 1% !important;
+        }
+    }
+
+    .btn {
+        &-primary {
+            border-radius: 0 0 0 var(--bs-border-radius) !important;
+
+            @include media-breakpoint-up(md) {
+                border-radius: 0 !important;
+            }
+        }
+
+        &-danger {
+            border-radius: 0 0 var(--bs-border-radius) 0 !important;
+
+            @include media-breakpoint-up(md) {
+                border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
+            }
+        }
+    }
+}
+
 .btn-md {
     height: 38px;
 }

resources/sass/bo/utilities/_bootstrap-custom.scss

@@ -8,6 +8,9 @@
 
         @include generate-bs-borders($infix, $prefix);
 
+        .w#{$infix}-fit {
+            width: fit-content !important;
+        }
         .w#{$infix}-25 {
             width: 25% !important;
         }

resources/views/bo/modules/search-bar.blade.php

@@ -1,44 +1,35 @@
-@php
-    $iArgs = [];
-    if (request()->sort_col) {
-        $iArgs['sort_col'] = request()->sort_col;
-    }
-
-    if (request()->search) {
-        $iArgs['search'] = request()->sort_way;
-    }
-@endphp
 <div class="row mb-3">
     <div class="col-12">
-        <form id="searchForm" action="/{{ request()->path() }}">
+        <form id="search-form" action="/{{ request()->path() }}">
-            <div class="input-group pt-3">
+            <div class="d-flex align-items-center justify-content-center flex-column flex-md-row input-group pt-3">
-                <label class="input-group-text" for="searchField">{{ $searchFields }}</label>
+                <label class="input-group-text w-100 w-md-fit" for="search-field">
+                    <span class="text-truncate">
+                        {{ sprintf('Rechercher %s', $searchFields) }}
+                    </span>
+                </label>
                 @if (request()->sort_col)
                     <input class="d-none" name="sort_col" type="text" value="{{ request()->sort_col }}">
                 @endif
                 @if (request()->sort_way)
                     <input class="d-none" name="sort_way" type="text" value="{{ request()->sort_way }}">
                 @endif
-                @if (request()->rangefilter)
+                <input class="form-control w-100" id="search-field" name="search" type="search" value="{{ request()->search }}"
-                    <input class="d-none" name="rangefilter" type="text" value="{{ request()->rangefilter }}">
-                @endif
-                @if (request()->group)
-                    <input class="d-none" name="group" type="text" value="{{ request()->group }}">
-                @endif
-                <input class="form-control" id="searchField" name="search" type="search" value="{{ request()->search }}"
                     placeholder="{{ __('crud.other.search_placeholder') }}" />
-                <button class="btn btn-primary" data-bs-toggle="tooltip" type="submit" title="{{ __('crud.other.search_start') }}">
+                <div class="d-flex justify-content-center align-items-center input-group w-100 w-md-fit">
-                    <i class="fas fa-search"></i>
+                    <button class="btn btn-primary w-50 w-md-fit" data-bs-toggle="tooltip" type="submit"
-                </button>
+                        title="{{ __('crud.other.search_start') }}">
-                <button class="btn btn-danger" id="searchDelete" data-bs-toggle="tooltip" type="button"
+                        <i class="fas fa-search"></i>
-                    title="{{ __('crud.other.search_delete') }}">
+                    </button>
-                    <i class="fas fa-backspace"></i>
+                    <button class="btn btn-danger w-50 w-md-fit m-0" id="searchDelete" data-bs-toggle="tooltip" type="button"
-                </button>
+                        title="{{ __('crud.other.search_delete') }}">
+                        <i class="fas fa-backspace"></i>
+                    </button>
+                </div>
                 @push('scripts')
                     <script nonce="{{ $nonce }}">
                         document.getElementById('searchDelete').addEventListener('click', function(e) {
-                            document.getElementById('searchField').value = '';
+                            document.getElementById('search-field').value = '';
-                            document.getElementById('searchForm').submit();
+                            document.getElementById('search-form').submit();
                         });
                     </script>
                 @endpush