Compare commits

...

2 Commits

Author SHA1 Message Date
BOHA
e082a6ef06 chore(release): v1.9.7 — compact mobile filter bars
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-06 16:11:59 +02:00
BOHA
1662453d9c 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>
2026-06-06 16:11:46 +02:00
3 changed files with 30 additions and 23 deletions

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "app-ts", "name": "app-ts",
"version": "1.9.6", "version": "1.9.7",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "app-ts", "name": "app-ts",
"version": "1.9.6", "version": "1.9.7",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",

View File

@@ -1,6 +1,6 @@
{ {
"name": "app-ts", "name": "app-ts",
"version": "1.9.6", "version": "1.9.7",
"description": "", "description": "",
"main": "dist/server.js", "main": "dist/server.js",
"scripts": { "scripts": {

View File

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