Fix oversized task checkboxes and inconsistent meal text alignment

Exclude small buttons (task checkboxes, action buttons, color swatches)
from the 44px min-size rule in pwa.css — they already expand touch area
via ::before pseudo-elements. Force consistent left-alignment on meal
card titles, ingredients, and type labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-29 15:51:08 +02:00
parent 29c9292d2d
commit 26a42d001b
2 changed files with 13 additions and 2 deletions
+8 -2
View File
@@ -30,8 +30,14 @@ body {
padding-bottom: env(safe-area-inset-bottom);
}
/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ── */
button, a, [role="button"], input[type="checkbox"], input[type="radio"] {
/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ──
* Ausnahme: Elemente, die Touch-Area bereits per ::before erweitern
* (task-status-btn, subtask-item__checkbox, meal-card action-btns,
* note color-swatches, etc.) — dort würde min-44px das Layout sprengen. */
button:not(.task-status-btn):not(.subtask-item__checkbox):not(.meal-card__action-btn):not(.note-color-btn):not(.modal-panel__close):not(.btn-dismiss),
a,
input[type="checkbox"],
input[type="radio"] {
min-height: 44px;
min-width: 44px;
}