From 0a97ea2fea23bd6907f1eb63d31ce6949a95ffca Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 22 Apr 2026 15:39:12 +0200
Subject: [PATCH] fix(wishlist): Card stacked auf Mobile, Titel-Overflow
 behoben
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 374fad9..2005ba4 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -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>