Changes

resources/js/Components/PersonInfo/PersonInfoPhonesTab.vue

@@ -30,9 +30,9 @@ const handleSms = (phone) => emit("sms", phone);
 <template>
   <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
     <template v-if="getPhones(person).length">
-      <Card class="p-2 gap-1" v-for="phone in getPhones(person)" :key="phone.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="phone in getPhones(person)" :key="phone.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"
             >
@@ -79,9 +79,12 @@ const handleSms = (phone) => emit("sms", phone);
             </DropdownMenu>
           </div>
         </div>
-        <p class="text-sm font-medium text-gray-900 leading-relaxed p-1">
+        <p class="font-medium leading-relaxed p-1">
           {{ phone.nu }}
         </p>
+        <p class="text-sm text-muted-foreground p-1" v-if="phone.description">
+          {{ phone.description }}
+        </p>
       </Card>
     </template>
     <button