fix(wishlist): 2-Spalten-Grid auf Mobile statt stacked Footer
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m17s

Der stacked Card-Footer liess unter dem Bild (96x96) eine tote
Weissflaeche entstehen — Buttons rechts unten, links leer, unaufgeraeumt.

Neues Layout auf <=600px: Card ist 2-Spalten-Grid (96px | 1fr), Bild
spannt vertikal ueber alle Rows, rechts stapeln sich Titel -> Meta ->
Actions direkt untereinander. `display: contents` auf .body/.text zieht
die DOM-Kinder ohne Markup-Umbau in die Grid-Cells.

Ergebnis: Card-Hoehe orientiert sich am Content, keine toten Zonen,
Bild fuellt seinen Streifen vertikal, Buttons sitzen eng unter der Meta
(0.5rem padding) — tap-friendly ohne Kleben.

Getestet: svelte-check 0 errors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-22 16:05:28 +02:00
parent 2573f80940
commit a68b99c807

View File

@@ -343,24 +343,50 @@
font-weight: 600; font-weight: 600;
} }
/* Handy: Card stacked — Bild+Titel oben, Actions als Card-Footer /* Handy: 2-Spalten-Grid — Bild links ueber alle Rows, rechts stapeln
unten rechts. Vermeidet Titel-Overflow hinter den Buttons auf sich Titel, Meta, Actions. `display: contents` auf .body/.text zieht
schmalen Viewports (≤~414px), gibt Tap-Targets mehr Platz. die DOM-Kinder direkt in die Card-Grid, ohne Markup-Umbau. Vermeidet
Actions sitzen im gleichen weissen Card-Hintergrund ohne Trenner, die tote Weissflaeche unter dem Bild bei schmalen Viewports. */
damit sie nicht als eigener Block wirken. */
@media (max-width: 600px) { @media (max-width: 600px) {
.card { .card {
flex-direction: column; display: grid;
grid-template-columns: 96px 1fr;
grid-template-areas:
'img title'
'img meta'
'img actions';
column-gap: 0;
}
.body {
display: contents;
}
.body img,
.placeholder {
grid-area: img;
width: 96px;
height: 100%;
min-height: 100%;
} }
.text { .text {
padding: 0.7rem 0.75rem 0.4rem; display: contents;
}
.title {
grid-area: title;
padding: 0.7rem 0.75rem 0.15rem;
}
.meta {
grid-area: meta;
padding: 0 0.75rem;
margin-top: 0;
} }
.actions-top { .actions-top {
grid-area: actions;
position: static; position: static;
display: flex; display: flex;
gap: 0.4rem; gap: 0.4rem;
padding: 0 0.75rem 0.75rem; padding: 0.5rem 0.75rem 0.7rem;
justify-content: flex-end; justify-content: flex-end;
align-self: end;
} }
} }
</style> </style>