From a68b99c807b1f474fa5ddb21f7899bb5c09dc023 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 22 Apr 2026 16:05:28 +0200
Subject: [PATCH] fix(wishlist): 2-Spalten-Grid auf Mobile statt stacked Footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/routes/wishlist/+page.svelte | 42 ++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 46045b4..137ff32 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -343,24 +343,50 @@
     font-weight: 600;
   }
 
-  /* Handy: Card stacked — Bild+Titel oben, Actions als Card-Footer
-     unten rechts. Vermeidet Titel-Overflow hinter den Buttons auf
-     schmalen Viewports (≤~414px), gibt Tap-Targets mehr Platz.
-     Actions sitzen im gleichen weissen Card-Hintergrund ohne Trenner,
-     damit sie nicht als eigener Block wirken. */
+  /* 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 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 {
+      grid-area: actions;
       position: static;
       display: flex;
       gap: 0.4rem;
-      padding: 0 0.75rem 0.75rem;
+      padding: 0.5rem 0.75rem 0.7rem;
       justify-content: flex-end;
+      align-self: end;
     }
   }
 </style>