From c29f0c5124994e7c4ff65528324da406f6273195 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Fri, 20 Dec 2024 21:25:41 +0100
Subject: [PATCH] Update item previews

---
 web/src/components/item/ItemPreview.tsx | 21 +++++++++++----------
 web/src/routes/item/$itemId/index.tsx   |  6 +++++-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/components/item/ItemPreview.tsx b/web/src/components/item/ItemPreview.tsx
index 1b6f652..902aa0b 100644
--- a/web/src/components/item/ItemPreview.tsx
+++ b/web/src/components/item/ItemPreview.tsx
@@ -14,7 +14,6 @@ import { useMedia } from '@/api/media';
 
 import { LocationPreview } from '../location/LocationPreview';
 import { Tag } from '../Tag';
-import { UserProfile } from '../UserProfile';
 
 const UNKNOWN_ITEM = 'Unknown Item';
 
@@ -202,15 +201,17 @@ const ItemPreviewLarge: FC<{
             {formattedItemId && (
                 <div className="bg-background absolute left-0 top-0 z-10 rounded-br-md rounded-tl-md border-b border-r px-1 py-0.5 text-sm">#{formattedItemId}</div>
             )}
-            <AvatarHolder
-                item_id={item?.item_id}
-                image={mediaUrl}
-                alt={item?.name || UNKNOWN_ITEM}
-                size="large"
-                key={`media-${item?.item_id}`}
-                randomHue={randomHue}
-            />
-            <div className="flex grow flex-col justify-center -space-y-1.5 overflow-hidden py-4">
+            <div className="mx-auto md:mx-0">
+                <AvatarHolder
+                    item_id={item?.item_id}
+                    image={mediaUrl}
+                    alt={item?.name || UNKNOWN_ITEM}
+                    size="large"
+                    key={`media-${item?.item_id}`}
+                    randomHue={randomHue}
+                />
+            </div>
+            <div className="flex max-w-full grow flex-col justify-center -space-y-1.5 overflow-hidden py-4">
                 <div className='grow'>
                     <div className="overflow-hidden text-ellipsis whitespace-nowrap text-base">
                         {item?.name || UNKNOWN_ITEM}
diff --git a/web/src/routes/item/$itemId/index.tsx b/web/src/routes/item/$itemId/index.tsx
index 22a348e..45e30cc 100644
--- a/web/src/routes/item/$itemId/index.tsx
+++ b/web/src/routes/item/$itemId/index.tsx
@@ -26,6 +26,7 @@ import { UserProfile } from '@/components/UserProfile';
 import { YeetButton } from '@/components/YeetButton';
 import { SCPage } from '@/layouts/SimpleCenterPage';
 import { queryClient } from '@/util/query';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/item/$itemId/')({
     // if item_id is not formatId(item_id, instanceSettings), redirect to the formatted item_id
@@ -80,7 +81,10 @@ export const Route = createFileRoute('/item/$itemId/')({
                 subtext={
                     <>
                         <span>{`#${itemId}`}</span>
-                        <Button variant='ghost' size='small-icon' onClick={() => navigator.clipboard.writeText(itemId)}><FiCopy size={10} className='size-2 text-xs' /></Button>
+                        <Button variant='ghost' size='small-icon' onClick={() => {
+                            navigator.clipboard.writeText(itemId);
+                            toast.success('Copied to clipboard');
+                        }}><FiCopy size={10} className='size-2 text-xs' /></Button>
                     </>
                 }
                 suffix={