fix: #290 text not wrapping in correct places

frontend/components/Item/Card.vue

@@ -1,19 +1,25 @@
 <template>
   <NuxtLink class="group card rounded-md border border-gray-300" :to="`/item/${item.id}`">
     <div class="relative h-[200px]">
-      <img v-if="imageUrl" class="h-[200px] w-full rounded-t border-gray-300 object-cover shadow-sm" :src="imageUrl" />
-      <div class="absolute bottom-1 left-1">
+      <img
+        v-if="imageUrl"
+        class="h-[200px] w-full rounded-t border-gray-300 object-cover shadow-sm"
+        :src="imageUrl"
+        alt=""
+      />
+      <div class="absolute bottom-1 left-1 text-wrap">
         <NuxtLink
           v-if="item.location"
           class="badge rounded-md text-sm shadow-md hover:link"
           :to="`/location/${item.location.id}`"
+          loading="lazy"
         >
           {{ item.location.name }}
         </NuxtLink>
       </div>
     </div>
     <div class="col-span-4 flex grow flex-col gap-y-1 rounded-b bg-base-100 p-4 pt-2">
-      <h2 class="line-clamp-2 text-ellipsis text-lg font-bold">{{ item.name }}</h2>
+      <h2 class="line-clamp-2 text-ellipsis text-lg font-bold text-wrap">{{ item.name }}</h2>
       <div class="divider my-0"></div>
       <div class="flex gap-2">
         <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">

frontend/components/Item/View/Table.vue

@@ -45,7 +45,7 @@
             }"
           >
             <template v-if="h.type === 'name'">
-              <NuxtLink class="hover" :to="`/item/${d.id}`">
+              <NuxtLink class="hover text-wrap" :to="`/item/${d.id}`">
                 {{ d.name }}
               </NuxtLink>
             </template>

frontend/pages/item/[id]/index.vue

@@ -472,15 +472,15 @@
             <div>
               <div v-if="fullpath && fullpath.length > 0" class="breadcrumbs py-0 text-sm">
                 <ul class="text-base-content/70">
-                  <li v-for="part in fullpath" :key="part.id">
+                  <li v-for="part in fullpath" :key="part.id" class="text-wrap">
                     <NuxtLink :to="`/${part.type}/${part.id}`"> {{ part.name }}</NuxtLink>
                   </li>
                 </ul>
               </div>
-              <h1 class="pb-1 text-2xl">
+              <h1 class="text-wrap pb-1 text-2xl">
                 {{ item ? item.name : "" }}
               </h1>
-              <div class="flex flex-wrap gap-1 text-xs">
+              <div class="flex flex-wrap gap-1 text-wrap text-xs">
                 <div>
                   Created
                   <DateTime :date="item?.createdAt" />