Changes

resources/js/Components/PersonInfo/PersonInfoAddressesTab.vue

@@ -24,9 +24,9 @@ const handleDelete = (id, label) => emit("delete", id, label);
 
 <template>
   <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-    <Card class="p-2 gap-1" v-for="address in person.addresses" :key="address.id">
-      <div class="flex items-center justify-between mb-2">
-        <div class="flex flex-wrap gap-2">
+    <Card class="p-2 gap-0" v-for="address in person.addresses" :key="address.id">
+      <div class="flex items-center justify-between">
+        <div class="flex flex-wrap gap-1">
           <span
             class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
           >
@@ -61,13 +61,16 @@ const handleDelete = (id, label) => emit("delete", id, label);
           </DropdownMenu>
         </div>
       </div>
-      <p class="text-sm font-medium text-gray-900 leading-relaxed p-1">
+      <p class="font-medium text-gray-900 leading-relaxed p-1">
         {{
           address.post_code && address.city
             ? `${address.address}, ${address.post_code} ${address.city}`
             : address.address
         }}
       </p>
+      <p class="text-sm text-muted-foreground p-1" v-if="address.description">
+        {{ address.description }}
+      </p>
     </Card>
     <button
       v-if="edit"