From ddf430bbb7d0ff36128020891f23de6514ffec65 Mon Sep 17 00:00:00 2001
From: rasmusq <rasmus@rasmusq.com>
Date: Tue, 25 Nov 2025 19:58:15 +0100
Subject: [PATCH] fix: wishlist item reserve view layout

---
 .../components/wishlist/WishlistItem.svelte   | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/wishlist/WishlistItem.svelte b/src/lib/components/wishlist/WishlistItem.svelte
index 35907f9..4944a4c 100644
--- a/src/lib/components/wishlist/WishlistItem.svelte
+++ b/src/lib/components/wishlist/WishlistItem.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Card, CardContent } from "$lib/components/ui/card";
 	import type { Item } from "$lib/server/schema";
-	import { GripVertical, Link } from "lucide-svelte";
+	import { GripVertical, ExternalLink } from "lucide-svelte";
 	import { getCardStyle } from '$lib/utils/colors';
+	import { Button } from "$lib/components/ui/button";
 
 	interface Props {
 		item: Item;
@@ -71,42 +72,40 @@
 					/>
 				{/if}
 
-				<div class="flex-1 items-center">
-					<div
-						class="flex items-center justify-between flex-wrap"
-					>
-						<div class="flex-1">
-							<h3 class="font-semibold text-lg">{item.title}</h3>
-						</div>
-
-						{#if children}
-							{@render children()}
-						{/if}
+				<div class="flex-1 items-center min-w-0">
+					<div class="flex-1">
+						<h3 class="font-semibold text-lg break-words">{item.title}</h3>
 					</div>
 
 					{#if item.description}
-						<p class="text-muted-foreground">{item.description}</p>
+						<p class="text-muted-foreground break-words whitespace-pre-wrap" style="overflow-wrap: anywhere;">{item.description}</p>
 					{/if}
 
-					<div class="flex flex-wrap text-sm">
+					<div class="flex flex-wrap gap-2 items-center text-sm mt-2">
 						{#if item.price}
 							<span class="font-medium"
 								>{formatPrice(item.price, item.currency)}</span
 							>
 						{/if}
+					</div>
+
+					<div class="flex flex-wrap gap-2 items-center mt-3">
 						{#if item.link}
-							<a
+							<Button
 								href={item.link}
 								target="_blank"
 								rel="noopener noreferrer"
+								variant="outline"
+								size="sm"
+								class="gap-1.5"
 							>
-								<div class="flex flex-row gap-1 items-center">
-									<p class="text-muted-foreground">View Product</p>
-									<Link
-										class="pt-1 w-5 h-5 text-muted-foreground"
-									/>
-								</div>
-							</a>
+								<ExternalLink class="w-4 h-4" />
+								View Product
+							</Button>
+						{/if}
+
+						{#if children}
+							{@render children()}
 						{/if}
 					</div>
 				</div>