aaverbitskiy/mapdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header: responsive layout — fields wrap to next line at min width, all gray blocks may shrink and reflow instead of overlapping

Browse Source
This commit is contained in:
aaverbitskiy 2026-07-26 05:36:35 +00:00
parent 68417bf45e
commit d2ad928948
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/styles.css
View File

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