src/components/ui/FetchedTags.vue

@@ -26,7 +26,9 @@ const tags = computed(() => {
         .filter((i) => i.startsWith(`${$props.tag}`))
         .reduce((acc, tag) => {
             const n = tag.split(`${$props.tag}`)[1];
-            acc[$props.item[`${$props.tag}${n}`]] = $props.item[`${$props.value}${n}`];
+            const key = `${$props.tag}${n}`;
+            const value = `${$props.value}${n}`;
+            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
             return acc;
         }, {});
 });
@@ -49,11 +51,29 @@ const tags = computed(() => {
 
 <style lang="scss" scoped>
 .fetchedTags {
-    align-items: center;
+    // display: flex;
+    /* width: 100%; */
+    /* flex: 2; */
+    /* flex-direction: column; */
+    /* flex-wrap: wrap; */
+    /* align-items: flex-start; */
+    /* align-content: flex-end; */
+    // justify-content: flex-start;
+    display: grid;
+    grid-template-columns: repeat(3, 0.15fr); /* Tres columnas de igual tamaño */
+    grid-template-rows: repeat(2, auto); /* Dos filas con alto automático */
+    // gap: 5px; /* Espacio entre las celdas */
     .wrap {
-        width: 100%;
-        flex-wrap: wrap;
-        display: flex;
+        /* width: 100%; */
+        /* flex-wrap: wrap; */
+        // display: flex;
+        /* flex-direction: row; */
+        /* flex: 1; */
+        //  flex: 0 50%;
+        /* padding: 5px; */
+        /* box-sizing: border-box; */
+        /* border: 1px solid #000;*/
+        display: contents;
     }
 
     .inline-tag {
@@ -67,7 +87,7 @@ const tags = computed(() => {
         border: 1px solid $color-spacer;
         text-overflow: ellipsis;
         overflow: hidden;
-        min-width: 4rem;
+        min-width: 7rem;
         max-width: 4rem;
     }