Change Array Display flex order

client/src/components/display/ArrayDisplay.vue

@@ -3,20 +3,25 @@ const props = withDefaults(defineProps<{
   data: any[],
   component?: string,
   componentProp?: '',
-  ellipsis?: number
+  ellipsis?: number,
+  empty?: string
 }>(), {
   data: () => [],
   component: '',
   componentProp: '',
   ellipsis: 10,
+  empty: '',
 });
 </script>
 <template>
-  <div class="pillbar">
+  <div v-if="props.data.length != 0" class="pillstack">
     <div v-for="(item, index) of props.data.slice(0, ellipsis)" :key="index" class="pill">
       <component v-bind="{[props.componentProp]: item}" :is="props.component" v-if="props.component !== ''"/>
       <template v-else>{{ item }}</template>
     </div>
     <div v-if="props.data.length >= props.ellipsis" class="pill">...</div>
   </div>
+  <div v-else>
+    {{ props.empty }}
+  </div>
 </template>

client/src/global-styles/components.css

@@ -128,6 +128,12 @@ tbody tr.selected {
   gap: 0.25rem;
 }
 
+.pillstack {
+  align-content: flex-start;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
 .pill {
   border: 1px solid var(--cl-fg);
   padding: 0.25rem;