boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix(mobile): compact 2-up filter bars instead of full-width column

Browse Source 
.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:
BOHA
2026-06-06 16:11:46 +02:00
parent 9dd2e07f19
commit 1662453d9c
1 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/admin/components.css
View File

@@ -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)
============================================================================ */