3 Commits

Author SHA1 Message Date
hsiegeln
2f0a45f487 chore: bump package.json + package-lock auf 1.4.1
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 3m59s
Patch-Release: fix fuer $effect-Loop auf der Startseite (sort=viewed)
und Wunschliste-Card-Layout auf Mobile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 16:24:58 +02:00
hsiegeln
a68b99c807 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>
2026-04-22 16:05:28 +02:00
hsiegeln
2573f80940 style(wishlist): Actions als Card-Footer ohne Trenner
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m15s
Auf Mobile wirkten die Buttons in der abgesetzten grauen Row mit
border-top etwas verloren. Nun sitzen sie im gleichen weissen
Card-Background ohne Border/Background-Wechsel — das Footer-Padding
reicht als visuelle Trennung, die Buttons gehoeren erkennbar zur Card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 15:50:12 +02:00
3 changed files with 37 additions and 11 deletions

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "kochwas",
"version": "1.4.0",
"version": "1.4.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "kochwas",
"version": "1.4.0",
"version": "1.4.1",
"dependencies": {
"@google/generative-ai": "^0.24.1",
"@types/archiver": "^7.0.0",

View File

@@ -1,6 +1,6 @@
{
"name": "kochwas",
"version": "1.4.0",
"version": "1.4.1",
"private": true,
"type": "module",
"scripts": {

View File

@@ -343,24 +343,50 @@
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. */
/* Handy: 2-Spalten-Grid — Bild links ueber alle Rows, rechts stapeln
sich Titel, Meta, Actions. `display: contents` auf .body/.text zieht
die DOM-Kinder direkt in die Card-Grid, ohne Markup-Umbau. Vermeidet
die tote Weissflaeche unter dem Bild bei schmalen Viewports. */
@media (max-width: 600px) {
.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 {
padding: 0.7rem 0.75rem;
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 {
grid-area: actions;
position: static;
display: flex;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid #e4eae7;
padding: 0.5rem 0.75rem 0.7rem;
justify-content: flex-end;
background: #fafbfa;
align-self: end;
}
}
</style>