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; }