From f3ba3224030bcab402d4d94bb7ea6bb595ce5921 Mon Sep 17 00:00:00 2001
From: root <root@dashboard-dev.charterlab.com>
Date: Wed, 22 Apr 2026 18:37:54 +0000
Subject: [PATCH] Fix variant pill labels to show short priority tag instead of
 full description

---
 frontend/src/components/pages/CompliancePage.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/pages/CompliancePage.js b/frontend/src/components/pages/CompliancePage.js
index 9964100..e10b45d 100644
--- a/frontend/src/components/pages/CompliancePage.js
+++ b/frontend/src/components/pages/CompliancePage.js
@@ -90,7 +90,7 @@ function groupByMetricFamily(allEntries, team) {
 // ---------------------------------------------------------------------------
 // Sub-components
 // ---------------------------------------------------------------------------
-function VariantPill({ entry }) {
+function VariantPill({ entry, label }) {
     const color = statusColor(entry.status);
     const isOk = entry.status === 'Meets/Exceeds Target';
     return (
@@ -114,7 +114,7 @@ function VariantPill({ entry }) {
                     boxShadow: `0 0 5px ${color}`,
                 }} />
             )}
-            <span style={{ color: '#94A3B8' }}>{entry.description || entry.team}</span>
+            {label && <span style={{ color: '#94A3B8' }}>{label}</span>}
             <span style={{ color, fontWeight: '600' }}>{pctDisplay(entry.compliance_pct)}</span>
         </span>
     );
@@ -178,9 +178,14 @@ function MetricHealthCard({ family, active, onClick, onInfoClick, definitionLook
 
             {/* Variant pills */}
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginBottom: '0.5rem' }}>
-                {family.entries.map((entry, i) => (
-                    <VariantPill key={entry.metric_id + '-' + i} entry={entry} />
-                ))}
+                {family.entries.map((entry, i) => {
+                    // Only show a label when there are multiple variants to differentiate
+                    let label = null;
+                    if (family.entries.length > 1) {
+                        label = entry.priority || `#${i + 1}`;
+                    }
+                    return <VariantPill key={entry.metric_id + '-' + i} entry={entry} label={label} />;
+                })}
             </div>
 
             {/* Target */}