From d1bbc9c8bb4e7edffbd9bf6834addc27eb744f8c Mon Sep 17 00:00:00 2001 From: Ulas Date: Sun, 29 Mar 2026 16:20:12 +0200 Subject: [PATCH] Fix inconsistent text alignment in meal cards 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 --- public/styles/meals.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/public/styles/meals.css b/public/styles/meals.css index b066738..8e57235 100644 --- a/public/styles/meals.css +++ b/public/styles/meals.css @@ -124,6 +124,8 @@ background-color: var(--color-surface); display: flex; flex-direction: column; + align-items: stretch; + text-align: left; overflow: hidden; transition: border-color var(--transition-fast); } @@ -189,8 +191,9 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: left; line-height: 1.4; - width: 100%; + align-self: stretch; } .meal-card__meta { @@ -198,7 +201,8 @@ display: flex; align-items: center; gap: var(--space-1); - width: 100%; + align-self: stretch; + text-align: left; } .meal-card__ingredients-count { @@ -215,6 +219,7 @@ display: flex; gap: var(--space-1); margin-top: var(--space-1); + align-self: stretch; opacity: 0; transition: opacity var(--transition-fast); }