chore: do not wrap tags to achieve a nicer ui result

Author: SteKoe

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/resources/application.yml

@@ -45,6 +45,12 @@ spring:
           metadata:
             tags:
               environment: test
+              de-service-test-1: A large content
+              de-service-test-2: A large content
+              de-service-test-3: A large content
+              de-service-test-4: A large content
+              de-service-test-5: A large content
+              de-service-test-6: A large content
             kubectl.kubernetes.io/last-applied-configuration: '{"name":"jvm.threads.peak","description":"The peak live thread count since the Java virtual machine started or peak was reset","baseUnit":"threads","measurements":[{"statistic":"VALUE","value":64.0}],"availableTags":[]}'
   config:
     import: optional:configserver:http://localhost:8888/

spring-boot-admin-server-ui/src/main/frontend/components/sba-tag.vue

@@ -1,26 +1,26 @@
 <template>
   <span
-    class="inline-flex leading-none rounded shadow-sm text-sm overflow-hidden"
     :class="{
       'py-1 border border-gray-300 bg-white': !small,
-      'py-1 border text-xs': small,
+      'py-1 border text-xs bg-white': small,
     }"
+    class="inline-flex leading-none rounded shadow-sm text-sm overflow-hidden"
   >
     <span
       v-if="label"
-      class="inline-flex bg-sba-200 rounded text-sba-900 justify-center items-center transition-all"
       :class="{
         'py-1.5 px-2 ml-1': !small,
         'py-1.5 px-1.5 ml-1': small,
       }"
+      class="inline-flex bg-sba-200 rounded text-sba-900 justify-center items-center transition-all whitespace-nowrap"
       v-text="label"
     />
     <span
-      class="inline-flex px-2 justify-center items-center whitespace-nowrap"
       :class="{
         'pl-2': !!label,
         'bg-white pl-1.5': small,
       }"
+      class="inline-flex px-2 justify-center items-center whitespace-nowrap"
       v-text="value"
     />
   </span>

spring-boot-admin-server-ui/src/main/frontend/components/sba-tags.vue

@@ -15,14 +15,16 @@
   -->
 
 <template>
-  <div class="inline-flex gap-1">
+  <div :class="classNames('inline-flex gap-1', { 'flex-wrap': wrap })">
     <template v-for="(value, key) in tags" :key="key">
-      <sba-tag :small="small" :label="key" :value="value" />
+      <sba-tag :label="key" :small="small" :value="value" />
     </template>
   </div>
 </template>
 
 <script>
+import classNames from 'classnames';
+
 export default {
   props: {
     tags: {
@@ -33,6 +35,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    wrap: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    classNames: classNames,
   },
 };
 </script>

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

@@ -23,8 +23,8 @@
   >
     <div class="pr-3 md:w-16 text-center">
       <sba-status
-        :status="instance.statusInfo.status"
         :date="instance.statusTimestamp"
+        :status="instance.statusInfo.status"
       />
     </div>
     <div class="flex-1">
@@ -40,14 +40,14 @@
       <span class="text-sm italic" v-text="instance.id" />
     </div>
     <div class="hidden xl:block w-1/4 overflow-x-scroll">
-      <sba-tags :tags="instance.tags" :small="true" />
+      <sba-tags :small="true" :tags="instance.tags" :wrap="false" />
     </div>
     <div
       class="hidden xl:block w-1/4 text-center"
       v-text="instance.buildVersion"
     />
     <div class="instance-list-item__actions text-right">
-      <slot name="actions" :instance="instance" />
+      <slot :instance="instance" name="actions" />
     </div>
   </li>
 </template>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-hero.vue

@@ -8,7 +8,7 @@
       <small><em v-text="instance.id" /></small>
     </div>
     <div class="mt-4 text-center">
-      <sba-tags v-if="instance" :tags="instance.tags" />
+      <sba-tags v-if="instance" :tags="instance.tags" class="justify-center" />
     </div>
   </div>
 </template>