fix: wishlist item reserve view layout

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-1 items-center min-w-0">
-					<div
-						class="flex items-center justify-between flex-wrap"
-					>
 					<div class="flex-1">
-							<h3 class="font-semibold text-lg">{item.title}</h3>
+						<h3 class="font-semibold text-lg break-words">{item.title}</h3>
-						</div>
-
-						{#if children}
-							{@render children()}
-						{/if}
 					</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">
+								<ExternalLink class="w-4 h-4" />
-									<p class="text-muted-foreground">View Product</p>
+								View Product
-									<Link
+							</Button>
-										class="pt-1 w-5 h-5 text-muted-foreground"
+						{/if}
-									/>
+
-								</div>
+						{#if children}
-							</a>
+							{@render children()}
 						{/if}
 					</div>
 				</div>