feat(mobile): responsive Phase 1+2 — global small-phone rules + area fixes
All changes are mobile-only (max-width media queries); desktop unchanged. Global (systemic): - forms.css: all .admin-form-row* grids stack to 1 column at <=480px (fixes detail-page info grids, settings forms, modal forms staying 2-up on phones). - components.css: .admin-kpi-4/-3 stat grids collapse to 1 column at <=480px. - tables.css: row-action icons get 44px touch targets at <=768px. - datepicker.css: constrain the date-picker popper to the viewport at <=480px. - filemanager.css: toolbar wraps, new-folder input full-width, breadcrumb scrolls. Area specifics: - offers.css: Quill picker dropdowns kept on-screen (max-width) at <=480px. - invoices.css: month-nav wraps + 44px touch targets at <=640px. - attendance.css: Leaflet map height scales with viewport; clock-card padding tightened at <=480px. Audit confirmed all data tables (warehouse incl.) are already wrapped in the scroll container, so no table overflow/markup changes were needed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -845,7 +845,9 @@
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.admin-kpi-grid {
|
||||
.admin-kpi-grid,
|
||||
.admin-kpi-4,
|
||||
.admin-kpi-3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user