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

Fix inconsistent text alignment in meal cards

Browse Source 
Force left-alignment at every level: meal-slot container, meal-card,
title, meta, and actions. Use align-self: stretch and explicit
text-align: left to prevent any parent from overriding alignment.
Left-aligned text is the correct UX choice for small scannable cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-29 16:20:12 +02:00
parent d3becbcf13
commit d1bbc9c8bb
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/meals.css
+7 -2
View File
@@ -124,6 +124,8 @@
background-color: var(--color-surface); background-color: var(--color-surface);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch;
text-align: left;
overflow: hidden; overflow: hidden;
transition: border-color var(--transition-fast); transition: border-color var(--transition-fast);
} }
@@ -189,8 +191,9 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left;
line-height: 1.4; line-height: 1.4;
width: 100%; align-self: stretch;
} }
.meal-card__meta { .meal-card__meta {
@@ -198,7 +201,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-1);
width: 100%; align-self: stretch;
text-align: left;
} }
.meal-card__ingredients-count { .meal-card__ingredients-count {
@@ -215,6 +219,7 @@
display: flex; display: flex;
gap: var(--space-1); gap: var(--space-1);
margin-top: var(--space-1); margin-top: var(--space-1);
align-self: stretch;
opacity: 0; opacity: 0;
transition: opacity var(--transition-fast); transition: opacity var(--transition-fast);
} }