fix(wishlist): Card stacked auf Mobile, Titel-Overflow behoben

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>

package-lock.json

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

package.json

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

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
+  import { onMount, tick, untrack } from 'svelte';
   import { page } from '$app/stores';
   import { CookingPot, X, ChevronDown } from 'lucide-svelte';
   import { slide } from 'svelte/transition';
@@ -235,27 +235,31 @@
   // profiles, refetch with the new profile_id so the list reflects what
   // the *current* profile has viewed. Other sorts are profile-agnostic
   // and don't need this.
+  //
+  // Only `profileStore.active` must be a tracked dep. `allSort` /
+  // `allLoading` are read inside untrack: otherwise the `allLoading = false`
+  // write in the fetch-finally would re-trigger the effect and start the
+  // next fetch → endless loop.
   $effect(() => {
-    const active = profileStore.active;
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    if (allSort !== 'viewed') return;
+    profileStore.active;
-    if (allLoading) return;
+    untrack(() => {
-    // Re-fetch the first page; rehydrate would re-load the previous
+      if (allSort !== 'viewed') return;
-    // depth, but a sort-context change should reset to page 1 anyway.
+      if (allLoading) return;
-    void (async () => {
+      void (async () => {
-      allLoading = true;
+        allLoading = true;
-      try {
+        try {
-        const res = await fetch(buildAllUrl('viewed', ALL_PAGE, 0));
+          const res = await fetch(buildAllUrl('viewed', ALL_PAGE, 0));
-        if (!res.ok) return;
+          if (!res.ok) return;
-        const body = await res.json();
+          const body = await res.json();
-        const hits = body.hits as SearchHit[];
+          const hits = body.hits as SearchHit[];
-        allRecipes = hits;
+          allRecipes = hits;
-        allExhausted = hits.length < ALL_PAGE;
+          allExhausted = hits.length < ALL_PAGE;
-      } finally {
+        } finally {
-        allLoading = false;
+          allLoading = false;
-      }
+        }
-      // 'active' is referenced so $effect tracks it as a dep:
+      })();
-      void active;
+    });
-    })();
   });
 
   // Sync current query back into the URL as ?q=... via replaceState,

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>