From 75a4dba4ece4e52a54b2e25a32821528ebfe827f Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 4 Dec 2024 16:12:27 +0100
Subject: [PATCH] Fix images tags display #38

---
 src/assets/css/src/2.blocks.image.css   | 4 +++-
 src/components/project/brief/Images.vue | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/src/2.blocks.image.css b/src/assets/css/src/2.blocks.image.css
index b9dafa5..76d9ec9 100644
--- a/src/assets/css/src/2.blocks.image.css
+++ b/src/assets/css/src/2.blocks.image.css
@@ -41,8 +41,10 @@
   height: 1.5rem;
 }
 
-.image .tag {
+.image .tags {
   position: absolute;
   top: var(--space-12);
   left: var(--space-12);
+  right: var(--space-12);
+  gap: var(--space-8);
 }
diff --git a/src/components/project/brief/Images.vue b/src/components/project/brief/Images.vue
index 084575a..c7763a4 100644
--- a/src/components/project/brief/Images.vue
+++ b/src/components/project/brief/Images.vue
@@ -24,9 +24,11 @@
           :class="{ 'has-description': image.description.length > 0 }"
           @click="imageDetails = image"
         >
-          <span v-for="tag in image.tags" class="tag | btn btn--sm">{{
-            tag
-          }}</span>
+          <p class="tags | flex">
+            <span v-for="tag in image.tags" class="tag | btn btn--sm">{{
+              tag
+            }}</span>
+          </p>
           <img :src="image.url" alt="" />
         </figure>
       </template>