claude/kochwas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(recipe): Header-Bild auf allen Viewports max 30vh

Browse Source 
Die Mobile-Only-Regel führte auf Desktop zu riesigen 16:10-Covers
(auf 1440px-Breite fast 900px hoch). Jetzt gilt der 30vh-Deckel
überall — Bild bleibt proportional, Zutaten/Zubereitung bleiben
sichtbar ohne Scroll.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 14:34:01 +02:00
parent f92ce677f6
commit 8c93099d91
1 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/RecipeView.svelte
View File

@@ -175,16 +175,13 @@
display: block; display: block;
width: 100%; width: 100%;
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
/* Nie mehr als 30% der Bildschirmhöhe — auf schmalen Screens würde das
Bild sonst alles Wichtige wegdrücken, auf breiten Desktops wäre es
unverhältnismäßig groß. */
max-height: 30vh;
object-fit: cover; object-fit: cover;
background: #eef3ef; 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 { .hdr-body {
padding: 1rem 1rem 0.25rem; padding: 1rem 1rem 0.25rem;
} }