From 1662453d9c125668f2cf9260aebb8d62a3c07beb Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 16:11:46 +0200
Subject: [PATCH] fix(mobile): compact 2-up filter bars instead of full-width
 column

.admin-search-bar on phones (<=768px) was flex-direction:column with each
control forced full-width (min-width:100% at <=480), so multi-filter bars
(warehouse receipts/issues, sales lists) became a tall stack of huge controls.
Now: the search box spans the row; filter selects/date pickers sit two-per-row;
the reset button spans the row. 44px/16px touch sizing unchanged; applies
consistently to every page using .admin-search-bar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/components.css | 47 +++++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/admin/components.css b/src/admin/components.css
index e067eac..e0ce4a1 100644
--- a/src/admin/components.css
+++ b/src/admin/components.css
@@ -1094,37 +1094,44 @@
 }
 
 @media (max-width: 768px) {
+  /* Compact 2-up filter grid instead of a tall full-width column:
+     the search box spans the row; the filter selects / date pickers sit
+     two-per-row; the reset button spans the row. Touch sizing (44px height +
+     16px font from forms.css) is unchanged — this just halves the vertical
+     footprint of multi-filter bars on phones. */
   .admin-search-bar {
-    flex-direction: column;
     align-items: stretch;
   }
 
-  .admin-search-bar .admin-form-input,
-  .admin-search-bar .admin-form-select {
-    max-width: 100%;
-  }
-
-  .admin-search-bar .react-datepicker-wrapper {
-    max-width: 100%;
+  /* Search box spans the full row (handles both the .admin-search wrapper
+     and a bare text input used directly as the search field). */
+  .admin-search-bar > .admin-search,
+  .admin-search-bar > .admin-form-input:not([type="date"]) {
+    flex: 1 1 100%;
+    max-width: none;
   }
 
   .admin-search {
-    max-width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  /* Filters (status/supplier selects, native date inputs, datepicker
+     wrappers): two per row. */
+  .admin-search-bar > .admin-form-select,
+  .admin-search-bar > .admin-form-input[type="date"],
+  .admin-search-bar > .react-datepicker-wrapper {
+    flex: 1 1 calc(50% - 0.25rem);
+    min-width: 0;
+    max-width: none;
+  }
+
+  /* Action buttons (e.g. "Zrušit filtry") span the full row. */
+  .admin-search-bar > .admin-btn {
     flex: 1 1 100%;
   }
 }
 
-@media (max-width: 480px) {
-  .admin-search-bar .admin-form-input,
-  .admin-search-bar .admin-form-select {
-    min-width: 100%;
-  }
-
-  .admin-search-bar .react-datepicker-wrapper {
-    min-width: 100%;
-  }
-}
-
 /* ============================================================================
    Item Picker (Warehouse)
    ============================================================================ */