From bcea7f6619ec5ad799af24082ef01639e854deaf Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 30 Sep 2025 15:15:12 +0200
Subject: [PATCH 1/2] Show matrix environ badges only if key has value

---
 web/src/components/repo/pipeline/PipelineStepList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 39ab922d110..8b0107dcc57 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -70,7 +70,7 @@
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
               <div v-for="(value, key) in workflow.environ" :key="key">
-                <Badge :label="key" :value="value" />
+                <Badge v-if="value" :label="key" :value="value" />
               </div>
             </div>
             <button

From 5f9cc046580c463d1a1252a355c2716f589aac67 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 1 Oct 2025 20:21:03 +0200
Subject: [PATCH 2/2] support badges with missing label/value

---
 web/src/components/atomic/Badge.vue                  | 12 ++++++++----
 .../components/repo/pipeline/PipelineStepList.vue    |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 66bc30504f7..6e13201d02f 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>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 8b0107dcc57..39ab922d110 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -70,7 +70,7 @@
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
               <div v-for="(value, key) in workflow.environ" :key="key">
-                <Badge v-if="value" :label="key" :value="value" />
+                <Badge :label="key" :value="value" />
               </div>
             </div>
             <button