From d2ad928948ee6b2c354e8d34004774aab791f237 Mon Sep 17 00:00:00 2001
From: aaverbitskiy <aaverbitskiy@gmail.com>
Date: Sun, 26 Jul 2026 05:36:35 +0000
Subject: [PATCH] =?UTF-8?q?header:=20responsive=20layout=20=E2=80=94=20fie?=
 =?UTF-8?q?lds=20wrap=20to=20next=20line=20at=20min=20width,=20all=20gray?=
 =?UTF-8?q?=20blocks=20may=20shrink=20and=20reflow=20instead=20of=20overla?=
 =?UTF-8?q?pping?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles.css | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 01ac3cd..c9416ca 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -29,9 +29,11 @@ header {
   display: flex;
   gap: 14px;
   align-items: stretch;
-  /* Single row: keep every block (incl. the counters) on one line and, when the
-     window is too narrow, compress the fields group first instead of wrapping. */
-  flex-wrap: nowrap;
+  /* Responsive: the fields group compresses (and wraps its own fields) first;
+     if the window is still too narrow, whole gray blocks drop to the next row
+     instead of overlapping. */
+  flex-wrap: wrap;
+  align-content: flex-start;
   background: #fff;
   z-index: 20;
 }
@@ -45,14 +47,16 @@ header {
   background: #f2f2f2;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
-  flex-shrink: 0;
+  flex-shrink: 1;
+  min-width: 0;
 }
 /* The fields group is the one that gives way first when space runs out. */
-.hgroup-fields { flex-shrink: 1; min-width: 0; }
-.hgroup-fields .field,
-.hgroup-fields .fcol,
+.hgroup-fields { flex-shrink: 4; min-width: 0; flex-wrap: wrap; align-content: flex-start; }
+.hgroup-fields > .field,
+.hgroup-fields > .fcol { flex: 1 1 160px; min-width: 160px; }
 .hgroup-fields .dropdown,
-.hgroup-fields .dropdown-btn { min-width: 0; }
+.hgroup-fields .dropdown-btn,
+.hgroup-fields input[type=text] { min-width: 0; width: 100%; }
 .hgroup-brand { background: #eaeaea; }
 /* Fields group: top-align so the date input sits UNDER Город/Бренд. */
 .hgroup-fields { align-items: flex-start; }