fix: remove unappealing gap when no tags are assigned to instances

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue

@@ -20,7 +20,7 @@
       v-for="instance in instances"
       :key="instance.id"
       :data-testid="instance.id"
-      class="flex p-2 sm:pr-6 hover:bg-gray-100 gap-2 odd:bg-gray-50"
+      class="flex p-2 sm:pr-6 hover:bg-gray-100 gap-2 odd:bg-gray-50 items-center"
       @click.stop="showDetails(instance)"
     >
       <div class="pt-1 md:w-16 text-center">
@@ -30,55 +30,59 @@
         />
       </div>
       <div class="flex-1 overflow-hidden">
-        <div class="flex gap-2 items-center">
-          <div class="flex-1">
+        <section class="flex gap-2 items-center">
+          <div class="w-80" data-name="">
+            <!-- Section when URLs are visible -->
             <template v-if="instance.showUrl()">
-              <span
-                v-text="
-                  instance.registration.serviceUrl ||
-                  instance.registration.healthUrl
-                "
-              />
-              <div class="ml-1 inline-flex gap-1">
-                <sba-button
-                  as="a"
-                  :href="instance.registration.serviceUrl"
-                  size="2xs"
-                  referrerpolicy="no-referrer"
-                  target="_blank"
-                >
-                  <font-awesome-icon :icon="faHome" size="xs" />
-                </sba-button>
-                <sba-button
-                  as="a"
-                  :href="instance.registration.managementUrl"
-                  size="2xs"
-                  referrerpolicy="no-referrer"
-                  target="_blank"
-                >
-                  <font-awesome-icon :icon="faClipboardList" size="xs" />
-                </sba-button>
-                <sba-button
-                  as="a"
-                  :href="instance.registration.healthUrl"
-                  size="2xs"
-                  referrerpolicy="no-referrer"
-                  target="_blank"
-                >
-                  <font-awesome-icon :icon="faHeart" size="xs" />
-                </sba-button>
+              <div class="flex gap-1">
+                <div
+                  class="overflow-hidden text-ellipsis"
+                  v-text="
+                    instance.registration.serviceUrl ||
+                    instance.registration.healthUrl
+                  "
+                />
+                <div class="ml-1 inline-flex gap-1">
+                  <sba-button
+                    as="a"
+                    :href="instance.registration.serviceUrl"
+                    size="2xs"
+                    referrerpolicy="no-referrer"
+                    target="_blank"
+                  >
+                    <font-awesome-icon :icon="faHome" size="xs" />
+                  </sba-button>
+                  <sba-button
+                    as="a"
+                    :href="instance.registration.managementUrl"
+                    size="2xs"
+                    referrerpolicy="no-referrer"
+                    target="_blank"
+                  >
+                    <font-awesome-icon :icon="faClipboardList" size="xs" />
+                  </sba-button>
+                  <sba-button
+                    as="a"
+                    :href="instance.registration.healthUrl"
+                    size="2xs"
+                    referrerpolicy="no-referrer"
+                    target="_blank"
+                  >
+                    <font-awesome-icon :icon="faHeart" size="xs" />
+                  </sba-button>
+                </div>
               </div>
               <sba-tag
                 v-if="instance.registration.metadata?.['group']"
                 class="ml-2"
                 :value="instance.registration.metadata?.['group']"
                 small
               />
-              <br />
               <span class="text-sm italic" v-text="instance.id" />
             </template>
+            <!-- asd -->
             <template v-else>
-              <span v-text="instance.id"></span>
+              <div v-text="instance.id"></div>
               <sba-tag
                 v-if="instance.registration.metadata?.['group']"
                 class="ml-2"
@@ -87,14 +91,17 @@
               />
             </template>
           </div>
-          <div class="hidden lg:block" v-text="instance.buildVersion" />
-          <div class="pt-1 hidden lg:block text-right">
+          <div class="flex-1 hidden lg:block" v-text="instance.buildVersion" />
+          <div class="hidden lg:block text-right">
             <slot :instance="instance" name="actions" />
           </div>
-        </div>
-        <div class="mt-2 hidden lg:block overflow-x-auto">
+        </section>
+        <section
+          v-if="instance.tags.length > 0"
+          class="mt-2 hidden lg:block overflow-x-auto"
+        >
           <sba-tags :small="true" :tags="instance.tags" />
-        </div>
+        </section>
       </div>
     </li>
   </ul>

spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue

@@ -120,7 +120,11 @@
               </template>
 
               <template v-if="singleVersionInGroup(group)" #version>
-                <span v-text="group.instances[0].buildVersion" />
+                <span
+                  v-text="group.instances[0].buildVersion"
+                  class="transition-[opacity]"
+                  :class="{ 'opacity-0': isExpanded(group.name) }"
+                />
               </template>
 
               <template v-if="isGroupedByApplication" #actions>