chore(release): v1.9.8 — compact mobile filter bars + AdminDatePicker everywhere

Combines the undeployed v1.9.7 (compact 2-up filter bars) with the date-field
unification (all date fields via AdminDatePicker + mode-aware placeholder).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

package-lock.json

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

package.json

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

src/admin/attendance.css

@@ -434,3 +434,22 @@
   color: var(--text-muted);
   font-family: monospace;
 }
+
+/* ============================================================================
+   Mobile (responsive)
+   ============================================================================ */
+
+/* The Leaflet map at a fixed 400px dominates a phone viewport — let it scale
+   with the viewport height (with sensible min/max) on small screens. */
+@media (max-width: 640px) {
+  .attendance-location-map {
+    height: clamp(220px, 45vh, 400px);
+  }
+}
+
+/* The clock card's 2rem padding crushes content at ~360px — tighten it. */
+@media (max-width: 480px) {
+  .attendance-clock-card {
+    padding: 1rem;
+  }
+}

src/admin/components.css

@@ -610,6 +610,25 @@
     0 0 0 1px var(--border-color);
 }
 
+@media (max-width: 640px) {
+  .admin-tabs {
+    display: flex;
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .admin-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .admin-tab {
+    flex: 0 0 auto;
+    min-height: 44px;
+  }
+}
+
 /* ============================================================================
    Empty State
    ============================================================================ */
@@ -845,7 +864,9 @@
 }
 
 @media (max-width: 480px) {
-  .admin-kpi-grid {
+  .admin-kpi-grid,
+  .admin-kpi-4,
+  .admin-kpi-3 {
     grid-template-columns: 1fr;
   }
 }
@@ -1073,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)
    ============================================================================ */
@@ -1183,3 +1211,14 @@
   color: var(--text-secondary);
   white-space: nowrap;
 }
+
+@media (max-width: 640px) {
+  .admin-item-picker-list {
+    max-width: calc(100vw - 24px);
+    overflow-y: auto;
+  }
+
+  .admin-item-picker-item {
+    min-height: 44px;
+  }
+}

src/admin/components/AdminDatePicker.tsx

@@ -58,6 +58,7 @@ interface NativeInputProps {
   minDate?: string;
   maxDate?: string;
   disabled?: boolean;
+  placeholder?: string;
 }
 
 const modeToInputType: Record<string, string> = {
@@ -73,6 +74,7 @@ function NativeInput({
   minDate,
   maxDate,
   disabled,
+  placeholder,
 }: NativeInputProps) {
   const type = modeToInputType[mode] || "date";
   // For time inputs, min/max must be in HH:mm format, not date format
@@ -95,6 +97,7 @@ function NativeInput({
       value={value || ""}
       onChange={(e) => onChange(e.target.value)}
       className="admin-form-input"
+      placeholder={placeholder}
       required={required}
       disabled={disabled}
       min={minProp}
@@ -126,6 +129,12 @@ export default function AdminDatePicker({
 }: AdminDatePickerProps) {
   const useNative = isTouchDevice();
 
+  // Mode-aware default placeholder so empty date fields always show a format
+  // hint (callers can still override, e.g. "Od"/"Do" on range filters).
+  const effectivePlaceholder =
+    placeholder ??
+    (mode === "time" ? "hh:mm" : mode === "month" ? "mm.rrrr" : "dd.mm.rrrr");
+
   if (useNative) {
     return (
       <NativeInput
@@ -136,6 +145,7 @@ export default function AdminDatePicker({
         minDate={minDate}
         maxDate={maxDate}
         disabled={disabled}
+        placeholder={effectivePlaceholder}
       />
     );
   }
@@ -181,7 +191,7 @@ export default function AdminDatePicker({
   const customInput = (
     <CustomInput
       required={required}
-      placeholder={placeholder}
+      placeholder={effectivePlaceholder}
       disabled={disabled}
     />
   );
@@ -191,7 +201,7 @@ export default function AdminDatePicker({
     onChange: handleChange,
     locale: "cs",
     customInput,
-    placeholderText: placeholder,
+    placeholderText: effectivePlaceholder,
     minDate: parseMinMax(minDate),
     maxDate: parseMinMax(maxDate),
     popperPlacement: "bottom-start" as const,

src/admin/datepicker.css

@@ -197,3 +197,15 @@
 .react-datepicker__close-icon::after {
   background-color: var(--accent-color) !important;
 }
+
+/* Mobile safety net — keep the popper inside the viewport on small phones.
+   (Native date input is used on touch; this guards the rare desktop-style popper.) */
+@media (max-width: 480px) {
+  .react-datepicker-popper {
+    max-width: calc(100vw - 24px);
+  }
+
+  .react-datepicker {
+    font-size: 0.8rem !important;
+  }
+}

src/admin/filemanager.css

@@ -169,3 +169,31 @@
   color: var(--text-tertiary);
   cursor: help;
 }
+
+/* ============================================================================
+   File Manager — mobile
+   ============================================================================ */
+
+@media (max-width: 640px) {
+  /* Toolbar wraps so actions drop below the path instead of overflowing */
+  .fm-toolbar {
+    flex-wrap: wrap;
+  }
+
+  /* New-folder input goes full width (override the 250px desktop cap) */
+  .fm-new-folder .admin-form-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  /* Breadcrumb scrolls horizontally instead of overflowing the container */
+  .fm-breadcrumb {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fm-breadcrumb-segment {
+    flex-shrink: 0;
+  }
+}

src/admin/forms.css

@@ -310,6 +310,8 @@
 }
 
 @media (max-width: 480px) {
+  .admin-form-row,
+  .admin-form-row-3,
   .admin-form-row-4,
   .admin-form-row-5 {
     grid-template-columns: 1fr;
@@ -486,3 +488,23 @@
   color: var(--text-tertiary);
   font-size: 0.8125rem;
 }
+
+@media (max-width: 640px) {
+  .admin-customer-dropdown {
+    max-width: calc(100vw - 24px);
+    overflow-y: auto;
+  }
+
+  .admin-customer-dropdown-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 44px;
+  }
+
+  .admin-customer-selected .admin-btn-icon {
+    min-width: 44px;
+    min-height: 44px;
+    margin-right: -10px;
+  }
+}

src/admin/invoices.css

@@ -127,9 +127,17 @@
 }
 
 @media (max-width: 640px) {
+  /* Month-nav row may wrap so it never forces horizontal page overflow */
+  .invoice-month-nav {
+    flex-wrap: wrap;
+  }
+
+  /* 44px touch target for the prev/next month buttons */
   .invoice-month-btn {
     width: 44px;
     height: 44px;
+    min-width: 44px;
+    min-height: 44px;
   }
 
   .received-upload-row {

src/admin/offers.css

@@ -464,6 +464,26 @@
   display: none;
 }
 
+/* Keep Quill picker dropdowns on-screen on narrow phones.
+   The font picker hard-codes min-width: 11rem and the color picker a fixed
+   176px width — both overflow a ~360px viewport. */
+@media (max-width: 480px) {
+  .admin-rich-editor .ql-snow .ql-picker-options,
+  .admin-rich-editor .ql-snow .ql-font .ql-picker-options,
+  .admin-rich-editor .ql-snow .ql-size .ql-picker-options {
+    min-width: 0;
+    max-width: calc(100vw - 32px);
+  }
+
+  .admin-rich-editor
+    .ql-snow
+    .ql-color-picker
+    .ql-picker-options[aria-hidden="false"] {
+    width: auto;
+    max-width: calc(100vw - 32px);
+  }
+}
+
 @media (max-width: 768px) {
   .offers-items-table .admin-table td .admin-form-input {
     font-size: 16px;

src/admin/pages/Projects.tsx

@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
 import ConfirmModal from "../components/ConfirmModal";
 import FormModal from "../components/FormModal";
 import FormField from "../components/FormField";
+import AdminDatePicker from "../components/AdminDatePicker";
 
 import { formatDate, czechPlural } from "../utils/formatters";
 import SortIcon from "../components/SortIcon";
@@ -530,23 +531,21 @@ export default function Projects() {
 
           <div className="admin-form-row">
             <FormField label="Začátek">
-              <input
-                type="date"
+              <AdminDatePicker
+                mode="date"
                 value={createForm.start_date}
-                onChange={(e) =>
-                  setCreateForm({ ...createForm, start_date: e.target.value })
+                onChange={(val) =>
+                  setCreateForm({ ...createForm, start_date: val })
                 }
-                className="admin-form-input"
               />
             </FormField>
             <FormField label="Konec">
-              <input
-                type="date"
+              <AdminDatePicker
+                mode="date"
                 value={createForm.end_date}
-                onChange={(e) =>
-                  setCreateForm({ ...createForm, end_date: e.target.value })
+                onChange={(val) =>
+                  setCreateForm({ ...createForm, end_date: val })
                 }
-                className="admin-form-input"
               />
             </FormField>
           </div>

src/admin/pages/WarehouseReceiptForm.tsx

@@ -378,7 +378,6 @@ export default function WarehouseReceiptForm() {
                       delivery_note_date: val,
                     }))
                   }
-                  placeholder="dd.mm.yyyy"
                 />
               </FormField>
             </div>

src/admin/tables.css

@@ -65,6 +65,16 @@
   }
 }
 
+/* Row actions — enlarge touch targets so icon buttons are tappable */
+@media (max-width: 768px) {
+  .admin-table-actions a,
+  .admin-table-actions button,
+  .admin-table-actions .admin-btn-icon {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
 .admin-table-user {
   display: flex;
   align-items: center;