fix: nav group label alignment + impact badge bubble dots

Replace HIGH/MED/LOW text on impact badge with filled dot indicators
(●○○ / ●●○ / ●●●) to avoid confusion with source reliability labels.
Fix sidebar nav group headers misaligned with radio circles by switching
::before from display:block to flex:0 0 100% with flex-wrap on parent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboard/components.py

@@ -7,9 +7,6 @@ from dashboard.theme import (
     WARN_BG, WARN_BORDER,
     BULL_BG, BULL_BORDER, BEAR_BG, BEAR_BORDER,
     PURPLE, AI_BG, AI_BORDER, AI_COLOR, AI_BADGE_BG,
-    IMPACT_HIGH_BG, IMPACT_HIGH_TEXT,
-    IMPACT_MED_BG, IMPACT_MED_TEXT,
-    IMPACT_LOW_BG, IMPACT_LOW_TEXT, IMPACT_LOW_BORDER,
     RADIUS_CHIP,
 )
 
@@ -26,21 +23,26 @@ def reliability_badge(r: str) -> str:
 
 # ── Impact badge ─────────────────────────────────────────────────────────────
 
-_IMPACT_STYLES = {
-    "HIGH":   (IMPACT_HIGH_BG,  IMPACT_HIGH_TEXT, IMPACT_HIGH_BG,   "HIGH"),
-    "MEDIUM": (IMPACT_MED_BG,   IMPACT_MED_TEXT,  IMPACT_MED_BG,    "MED"),
-    "LOW":    (IMPACT_LOW_BG,   IMPACT_LOW_TEXT,  IMPACT_LOW_BORDER, "LOW"),
+_IMPACT_DOT_COLORS = {
+    "HIGH":   ("#0f172a", 3),
+    "MEDIUM": ("#64748b", 2),
+    "LOW":    ("#94a3b8", 1),
 }
 
 def impact_badge(level: str) -> str:
-    style = _IMPACT_STYLES.get(level)
-    if not style:
+    spec = _IMPACT_DOT_COLORS.get(level)
+    if not spec:
         return ""
-    bg, color, border, label = style
+    color, filled = spec
+    dots = "".join(
+        f'<span style="color:{color if i < filled else "#d1d5db"};font-size:0.55rem;line-height:1;">●</span>'
+        for i in range(3)
+    )
     return (
-        f'<span title="Impact: {level}" style="background:{bg};color:{color};'
-        f'border:1px solid {border};border-radius:4px;padding:1px 7px;'
-        f'font-size:0.66rem;font-weight:700;letter-spacing:0.06em;">{label}</span>'
+        f'<span title="Impact: {level}" style="display:inline-flex;align-items:center;gap:3px;'
+        f'background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:1px 7px;">'
+        f'<span style="font-size:0.6rem;font-weight:600;color:#64748b;letter-spacing:0.05em;">impact</span>'
+        f'{dots}</span>'
     )
 
 

dashboard/theme.py

@@ -258,10 +258,17 @@ def inject_global_css() -> None:
         }
 
         /* ── Sidebar nav group separators ──────────────────────────────────── */
+        /* Labels with group headers need flex-wrap so ::before spans full row */
+        [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(1),
+        [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(3),
+        [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(6) {
+            flex-wrap: wrap !important;
+        }
+
         /* Before Verdict (1st item) — "BRIEF" group label */
         [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(1)::before {
             content: "BRIEF";
-            display: block;
+            flex: 0 0 100%;
             font-size: 0.55rem !important;
             font-weight: 700 !important;
             text-transform: uppercase;
@@ -276,7 +283,7 @@ def inject_global_css() -> None:
         }
         [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(3)::before {
             content: "DEEP DIVE";
-            display: block;
+            flex: 0 0 100%;
             font-size: 0.55rem !important;
             font-weight: 700 !important;
             text-transform: uppercase;
@@ -291,7 +298,7 @@ def inject_global_css() -> None:
         }
         [data-testid="stSidebar"] [data-testid="stRadio"] label:nth-child(6)::before {
             content: "FORWARD";
-            display: block;
+            flex: 0 0 100%;
             font-size: 0.55rem !important;
             font-weight: 700 !important;
             text-transform: uppercase;