From c79cf8657dee7430d414eb7bd6f92a69d4393d8d Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Sat, 18 Apr 2026 12:45:31 +0200 Subject: [PATCH] style(recipe): Header-Bild auf Mobile max 30vh MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Das 16:10-Cover-Bild konnte auf Smartphones im Hochformat locker 40-50% des Viewports füllen und Aktionen wie Favorit/Wunschliste fast aus dem ersten Screen drücken. Auf <820px jetzt max-height:30vh — object-fit: cover sorgt dafür, dass das Bild schön im gekürzten Rahmen sitzt. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/lib/components/RecipeView.svelte | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte index 26de28d..03ad64c 100644 --- a/src/lib/components/RecipeView.svelte +++ b/src/lib/components/RecipeView.svelte @@ -178,6 +178,13 @@ object-fit: cover; background: #eef3ef; } + /* Mobile: verhindere, dass das Header-Bild einen unverhältnismäßig + großen Teil des Viewports füllt und alles Wichtige wegdrückt. */ + @media (max-width: 820px) { + .cover { + max-height: 30vh; + } + } .hdr-body { padding: 1rem 1rem 0.25rem; }