From 9e8b73be62f9098934b96b7d2312585ab937e814 Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Mon, 5 Jun 2023 06:16:02 +0900
Subject: [PATCH] [fix] realm ui

---
 src/lib/UI/Hub.svelte | 44 ++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/lib/UI/Hub.svelte b/src/lib/UI/Hub.svelte
index 40c31273..fe4ac19b 100644
--- a/src/lib/UI/Hub.svelte
+++ b/src/lib/UI/Hub.svelte
@@ -53,31 +53,33 @@
     </div>
 </div>
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
-    {#each charas as chara}
-        <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
-            openedData = chara
-        }}>
-            <div class="flex gap-2 w-full">
-                <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
-                <div class="flex flex-col flex-grow min-w-0">
-                    <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-                    <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
-                    <div class="flex flex-wrap">
-                        {#each chara.tags as tag, i}
-                            {#if i < 4}
-                                <div class="text-xs p-1 text-blue-400">{tag}</div>
-                            {:else if i === 4}
-                                <div class="text-xs p-1 text-blue-400">...</div>
-                            {/if}
-                        {/each}
+    {#key charas}
+        {#each charas as chara}
+            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
+                openedData = chara
+            }}>
+                <div class="flex gap-2 w-full">
+                    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+                    <div class="flex flex-col flex-grow min-w-0">
+                        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+                        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+                        <div class="flex flex-wrap">
+                            {#each chara.tags as tag, i}
+                                {#if i < 4}
+                                    <div class="text-xs p-1 text-blue-400">{tag}</div>
+                                {:else if i === 4}
+                                    <div class="text-xs p-1 text-blue-400">...</div>
+                                {/if}
+                            {/each}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </button>
-    {/each}
+            </button>
+        {/each}
+    {/key}
 </div>
 <div class="w-full flex justify-center">
-    <div>
+    <div class="flex">
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
             if(page > 0){
                 page -= 1