From 601fe4a2eaecc3cda7e1f9ed88f0d9c20c4b07ce Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 1 Oct 2025 21:11:20 +0200
Subject: [PATCH] Support matrix environ badges only with no key-values (#5578)

Fixes:

<img width="345" height="246" alt="grafik" src="https://github.com/user-attachments/assets/0e088773-291a-427f-a767-ede89e2195d0" />

After that change:

<img width="406" height="124" alt="image" src="https://github.com/user-attachments/assets/78fc1629-71d0-4be3-b06a-6f07bd4a6aba" />
---
 web/src/components/atomic/Badge.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 66bc30504..6e13201d0 100644
--- a/web/src/components/atomic/Badge.vue
+++ b/web/src/components/atomic/Badge.vue
@@ -1,15 +1,19 @@
 <template>
   <span class="inline-flex items-center text-xs font-medium">
     <span
-      v-if="label !== undefined"
-      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pr-1 pl-2 whitespace-nowrap text-white"
+      v-if="label"
+      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pl-2 whitespace-nowrap text-white"
+      :class="{
+        'rounded-r-full pr-2': !value,
+      }"
     >
       {{ label }}
     </span>
     <span
+      v-if="value"
       class="border-wp-state-neutral-100 rounded-r-full border-1 py-0.5 pr-2 pl-1 whitespace-nowrap"
       :class="{
-        'rounded-l-full pl-2': label === undefined,
+        'rounded-l-full pl-2': !label,
       }"
     >
       {{ value }}
@@ -20,6 +24,6 @@
 <script lang="ts" setup>
 defineProps<{
   label?: string;
-  value: string | number;
+  value?: string | number;
 }>();
 </script>