add break all

src/lib/components/community/Card.svelte

@@ -58,8 +58,8 @@
     </div>
     <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
       <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full relative">
-        <p class="text-white font-semibold text-lg">{card.prompt}</p>
-        <p class="text-white/75 font-regular text-base">{card.model.id}</p>
+        <p class="text-white font-semibold text-lg break-all">{card.prompt}</p>
+        <p class="text-white/75 font-regular text-base break-all">{card.model.id}</p>
         <button
           class="absolute bottom-3 right-3"
           on:click={(e) => {

src/lib/components/models/Card.svelte

@@ -59,7 +59,7 @@
     {/if}
   </div>
   <div class="flex items-center justify-between w-full gap-4 py-1">
-    <p class="text-white font-semibold text-base mb-1">{card?.id}</p>
+    <p class="text-white font-semibold text-base mb-1 break-all">{card?.id}</p>
     <div class="flex items-center justify-end gap-3">
       <div class="text-white text-sm flex items-center justify-end gap-1.5">
         <Icon icon="solar:heart-bold" class="w-5 h-5 text-red-500" />