openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix oversized task checkboxes and inconsistent meal text alignment

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/meals.css
+5
View File
@@ -140,6 +140,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: var(--space-1) var(--space-2) 0; padding: var(--space-1) var(--space-2) 0;
text-align: left;
} }
/* Slot-Typ-Farben — zentrale Tokens aus tokens.css */ /* Slot-Typ-Farben — zentrale Tokens aus tokens.css */
@@ -175,6 +176,8 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
text-align: left;
padding: var(--space-1) var(--space-2) var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2);
cursor: pointer; cursor: pointer;
} }
@@ -187,6 +190,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.4; line-height: 1.4;
width: 100%;
} }
.meal-card__meta { .meal-card__meta {
@@ -194,6 +198,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-1);
width: 100%;
} }
.meal-card__ingredients-count { .meal-card__ingredients-count {
public/styles/pwa.css
+8 -2
View File
@@ -30,8 +30,14 @@ body {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ── */ /* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ──
button, a, [role="button"], input[type="checkbox"], input[type="radio"] { * 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-height: 44px;
min-width: 44px; min-width: 44px;
} }