From 77246ca57ba4d06ffd3a69ba1bf713951bc26590 Mon Sep 17 00:00:00 2001
From: Matt Kilgore <matthew@kilgore.dev>
Date: Sat, 19 Oct 2024 13:07:26 -0400
Subject: [PATCH] fix: #290 text not wrapping in correct places

---
 frontend/components/Item/Card.vue       | 12 +++++++++---
 frontend/components/Item/View/Table.vue |  2 +-
 frontend/pages/item/[id]/index.vue      |  6 +++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue
index e95e2ea9..d4a51d7b 100644
--- a/frontend/components/Item/Card.vue
+++ b/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">
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index 7d51fba6..99ac0eeb 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/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>
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index cc5acdaa..b35aecd1 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/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" />