fix(ui): group pills, add empty message

src/pages/CommonForm/LinkedEntries.vue

@@ -27,6 +27,7 @@
 
     <!-- Linked Entry List -->
     <div
+      v-if="sequence.length"
       class="w-full overflow-y-auto custom-scroll"
       style="height: calc(100vh - var(--h-row-largest) - 1px)"
     >
@@ -58,17 +59,10 @@
           <div
             v-for="e of entries[sn].details"
             :key="String(e.name) + sn"
-            class="
-              entry
-              p-2
-              text-sm
-              cursor-pointer
-              hover:bg-gray-50
-              grid grid-cols-2
-              gap-1
-            "
+            class="p-2 text-sm cursor-pointer hover:bg-gray-50"
             @click="routeTo(sn, String(e.name))"
           >
+            <div class="flex justify-between">
               <!-- Name -->
               <p class="font-semibold">
                 {{ e.name }}
@@ -78,7 +72,8 @@
               <p v-if="e.date" class="text-xs text-gray-600">
                 {{ fyo.format(e.date, 'Date') }}
               </p>
-
+            </div>
+            <div class="flex gap-2 mt-1 pill-container flex-wrap">
               <!-- Credit or Debit (GLE) -->
               <p
                 v-if="isPesa(e.credit) && e.credit.isPositive()"
@@ -114,7 +109,8 @@
               <!-- Amounts -->
               <p
                 v-if="
-                isPesa(e.outstandingAmount) && e.outstandingAmount.isPositive()
+                  isPesa(e.outstandingAmount) &&
+                  e.outstandingAmount.isPositive()
                 "
                 class="pill no-scrollbar"
                 :class="colorClass('orange')"
@@ -158,6 +154,10 @@
         </div>
       </div>
     </div>
+    <p v-else class="p-4 text-sm text-gray-600">
+      {{ t`No linked entries found` }}
+    </p>
+  </div>
 </template>
 <script lang="ts">
 import { Doc } from 'fyo/model/doc';
@@ -311,12 +311,13 @@ const linkEntryDisplayFields: Record<string, string[]> = {
 .entry-container > div:last-child {
   @apply border-0;
 }
-.entry > *:nth-child(even) {
-  @apply ms-auto;
-}
 
 .pill {
   @apply py-0.5 px-1.5 rounded-md  text-xs;
   width: fit-content;
 }
+
+.pill-container:empty {
+  display: none;
+}
 </style>