fix: UX in instances list for tags (#4553)

Author: SteKoe

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

@@ -20,61 +20,57 @@
       v-for="instance in instances"
       :key="instance.id"
       :data-testid="instance.id"
-      class="flex items-center hover:bg-gray-100 p-2 pr-6"
+      class="flex p-2 sm:pr-6 hover:bg-gray-100 gap-2 odd:bg-gray-50"
       @click.stop="showDetails(instance)"
     >
-      <div class="pr-3 md:w-16 text-center">
+      <div class="pt-1 md:w-16 text-center">
         <sba-status
           :date="instance.statusTimestamp"
           :status="instance.statusInfo.status"
         />
       </div>
-      <div class="flex-auto xl:flex-1 xl:w-1/4 truncate">
-        <template v-if="instance.showUrl()">
-          <a
-            :href="
-              instance.registration.serviceUrl ||
-              instance.registration.healthUrl
-            "
-            @click.stop
-            v-text="
-              instance.registration.serviceUrl ||
-              instance.registration.healthUrl
-            "
-          />
-          <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>
-        <template v-else>
-          <span v-text="instance.id"></span>
-          <sba-tag
-            v-if="instance.registration.metadata?.['group']"
-            class="ml-2"
-            :value="instance.registration.metadata?.['group']"
-            small
-          />
-        </template>
-      </div>
-      <div
-        class="hidden xl:block w-1/4"
-        :class="{
-          'overflow-x-auto': Object.keys(instance.tags ?? {}).length > 0,
-        }"
-      >
-        <sba-tags :small="true" :tags="instance.tags" :wrap="false" />
-      </div>
-      <div
-        class="hidden xl:block w-2/12 text-center"
-        v-text="instance.buildVersion"
-      />
-      <div class="hidden md:block flex-1 text-right">
-        <slot :instance="instance" name="actions" />
+      <div class="flex-1 overflow-hidden">
+        <div class="flex gap-2 items-center">
+          <div class="flex-1">
+            <template v-if="instance.showUrl()">
+              <a
+                :href="
+                  instance.registration.serviceUrl ||
+                  instance.registration.healthUrl
+                "
+                @click.stop
+                v-text="
+                  instance.registration.serviceUrl ||
+                  instance.registration.healthUrl
+                "
+              />
+              <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>
+            <template v-else>
+              <span v-text="instance.id"></span>
+              <sba-tag
+                v-if="instance.registration.metadata?.['group']"
+                class="ml-2"
+                :value="instance.registration.metadata?.['group']"
+                small
+              />
+            </template>
+          </div>
+          <div class="hidden lg:block" v-text="instance.buildVersion" />
+          <div class="pt-1 hidden lg:block text-right">
+            <slot :instance="instance" name="actions" />
+          </div>
+        </div>
+        <div class="mt-2 hidden lg:block overflow-x-auto">
+          <sba-tags :small="true" :tags="instance.tags" />
+        </div>
       </div>
     </li>
   </ul>