From e2d4282b5d0932b9a7db2a74287cd177f39a59cc Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Sat, 28 Mar 2026 01:19:25 -0700
Subject: [PATCH] fix: sidebar active state uses inset box-shadow (no layout
 shift) and font-mono token

---
 coordinator/tests/test_frontend_css.py | 11 +++++------
 frontend/style.css                     |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/coordinator/tests/test_frontend_css.py b/coordinator/tests/test_frontend_css.py
index 6cb1dbc..40ed1f8 100644
--- a/coordinator/tests/test_frontend_css.py
+++ b/coordinator/tests/test_frontend_css.py
@@ -355,13 +355,13 @@ def test_css_sidebar_item_hover():
 
 
 def test_css_sidebar_item_active():
-    """.sidebar-item--active must have --bg-surface background and accent full border with 3px left."""
+    """.sidebar-item--active must use inset box-shadow stripe instead of border-left-width to avoid layout shift."""
     css = read_css()
     assert ".sidebar-item--active" in css
     block = _extract_rule_block(css, ".sidebar-item--active {")
     assert "background: var(--bg-surface)" in block
     assert "border-color: var(--accent)" in block
-    assert "border-left-width: 3px" in block
+    assert "box-shadow: inset 3px 0 0 var(--accent)" in block
 
 
 def test_css_sidebar_item_header():
@@ -403,7 +403,7 @@ def test_css_sidebar_item_body():
 
 
 def test_css_sidebar_item_body_pre():
-    """.sidebar-item-body pre must be anchored to bottom with 10px monospace font."""
+    """.sidebar-item-body pre must be anchored to bottom with 10px monospace font using --font-mono token."""
     css = read_css()
     assert ".sidebar-item-body pre" in css
     block = _extract_rule_block(css, ".sidebar-item-body pre {")
@@ -416,9 +416,8 @@ def test_css_sidebar_item_body_pre():
     assert "color: var(--text-muted)" in block
     assert "white-space: pre" in block
     assert "padding: 0 8px 6px" in block
-    # Monospace font family
-    assert "monospace" in block
-    assert "JetBrains Mono" in block
+    # Monospace font family via design token
+    assert "font-family: var(--font-mono)" in block
 
 
 def test_css_sidebar_empty():
diff --git a/frontend/style.css b/frontend/style.css
index 9fb4ae8..1134f2f 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -479,7 +479,7 @@ body {
 .sidebar-item--active {
   background: var(--bg-surface);
   border-color: var(--accent);
-  border-left-width: 3px;
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .sidebar-item-header {
@@ -531,7 +531,7 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   line-height: 1.4;
   color: var(--text-muted);