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>
This commit is contained in:
@@ -1094,37 +1094,44 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@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 {
|
.admin-search-bar {
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-search-bar .admin-form-input,
|
/* Search box spans the full row (handles both the .admin-search wrapper
|
||||||
.admin-search-bar .admin-form-select {
|
and a bare text input used directly as the search field). */
|
||||||
max-width: 100%;
|
.admin-search-bar > .admin-search,
|
||||||
}
|
.admin-search-bar > .admin-form-input:not([type="date"]) {
|
||||||
|
flex: 1 1 100%;
|
||||||
.admin-search-bar .react-datepicker-wrapper {
|
max-width: none;
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-search {
|
.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%;
|
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)
|
Item Picker (Warehouse)
|
||||||
============================================================================ */
|
============================================================================ */
|
||||||
|
|||||||
Reference in New Issue
Block a user