fix(ux): prevent iOS auto-zoom on inputs + lazy-load page CSS

Increase font-size to 16px on mobile for shopping quick-add inputs,
notes search, and contacts search. Desktop breakpoint restores compact
sizes. Move 9 page-specific stylesheets from index.html to on-demand
loading in router.js, reducing initial CSS payload.
This commit is contained in:
Ulas
2026-04-04 06:39:45 +02:00
parent 70c1291ae7
commit 364d029950
7 changed files with 58 additions and 17 deletions
+9 -3
View File
@@ -165,7 +165,7 @@
border: 1.5px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-primary);
font-size: var(--text-base);
font-size: var(--text-md);
transition: border-color var(--transition-fast);
min-height: 44px;
}
@@ -186,7 +186,7 @@
border: 1px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-primary);
font-size: var(--text-sm);
font-size: var(--text-md);
text-align: center;
min-height: auto;
height: auto;
@@ -206,7 +206,7 @@
border: 1.5px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-size: var(--text-md);
cursor: pointer;
min-height: 44px;
}
@@ -216,6 +216,12 @@
border-color: var(--color-accent);
}
@media (min-width: 1024px) {
.quick-add__input { font-size: var(--text-base); }
.quick-add__qty { font-size: var(--text-sm); }
.quick-add__cat { font-size: var(--text-sm); }
}
.quick-add__btn {
width: 44px;
height: 44px;