fix(wishlist): Card stacked auf Mobile, Titel-Overflow behoben
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m15s

Auf schmalen Viewports (~390px) ueberlagerten die drei Action-Buttons
den Titel: .text reservierte 170px padding-right, aber nach 96px Bild
+ Gaps blieb kaum Platz fuer den Titel — lange Woerter wie
"Spaetzle-Pfanne" liefen hinter die Buttons.

Fix: @media (max-width: 600px) — Card wird flex-direction:column,
Actions-Row rutscht aus position:absolute in eine statische Reihe mit
border-top unter dem Body, full-width. Zusaetzlich overflow-wrap +
word-break als Safety-Net gegen bindestrich-gefuellte Monstertitel.

Desktop-Layout unveraendert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-22 15:39:12 +02:00
parent 12f499cb98
commit 0a97ea2fea

View File

@@ -284,6 +284,8 @@
font-weight: 600;
font-size: 1rem;
line-height: 1.3;
overflow-wrap: break-word;
word-break: break-word;
}
.meta {
display: flex;
@@ -340,4 +342,25 @@
font-size: 0.85rem;
font-weight: 600;
}
/* Handy: Card stacked — Bild+Titel oben, Actions als eigene Reihe
darunter full-width. Vermeidet Titel-Overflow hinter den Buttons auf
schmalen Viewports (≤~414px), gibt Tap-Targets mehr Platz. */
@media (max-width: 600px) {
.card {
flex-direction: column;
}
.text {
padding: 0.7rem 0.75rem;
}
.actions-top {
position: static;
display: flex;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid #e4eae7;
justify-content: flex-end;
background: #fafbfa;
}
}
</style>