Fix images tags display #38

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);
 }

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>