From f1c28a4d06bccf4d61a05c670ed436e4a982d654 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Sat, 28 Mar 2026 01:12:27 -0700
Subject: [PATCH] style: sidebar cards use outlined tile aesthetic with gap,
 rounded corners, and fade gradient

---
 coordinator/tests/test_frontend_css.py | 35 ++++++++++++++++++++------
 frontend/style.css                     | 32 ++++++++++++++++++++---
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/coordinator/tests/test_frontend_css.py b/coordinator/tests/test_frontend_css.py
index 535d513..6cb1dbc 100644
--- a/coordinator/tests/test_frontend_css.py
+++ b/coordinator/tests/test_frontend_css.py
@@ -255,6 +255,16 @@ def test_css_sidebar_list():
     assert "overflow-x: hidden" in block
 
 
+def test_css_sidebar_list_padding():
+    """.sidebar-list must have padding and flex column layout with gap for card breathing room."""
+    css = read_css()
+    block = _extract_rule_block(css, ".sidebar-list {")
+    assert "padding: 8px" in block
+    assert "display: flex" in block
+    assert "flex-direction: column" in block
+    assert "gap: 6px" in block
+
+
 def test_css_sidebar_collapse_btn():
     """.sidebar-collapse-btn must be a minimal button styled for the chevron."""
     css = read_css()
@@ -313,34 +323,45 @@ def test_css_sidebar_item_exists():
 
 
 def test_css_sidebar_item_dimensions_and_layout():
-    """.sidebar-item must be 120px tall, flex column, overflow hidden, position relative."""
+    """.sidebar-item must be 120px tall, flex column, outlined card with transition."""
     css = read_css()
     block = _extract_rule_block(css, ".sidebar-item {")
     assert "height: 120px" in block
     assert "background: var(--bg-secondary)" in block
-    assert "border-bottom: 1px solid var(--border-subtle)" in block
+    assert "border: 1px solid var(--border)" in block
+    assert "border-radius: 4px" in block
     assert "cursor: pointer" in block
     assert "overflow: hidden" in block
     assert "display: flex" in block
     assert "flex-direction: column" in block
     assert "position: relative" in block
+    assert "transition:" in block
+
+
+def test_css_sidebar_item_border_radius():
+    """.sidebar-item must have border-radius: 4px matching the dashboard tile aesthetic."""
+    css = read_css()
+    block = _extract_rule_block(css, ".sidebar-item {")
+    assert "border-radius: 4px" in block
 
 
 def test_css_sidebar_item_hover():
-    """.sidebar-item:hover must use --bg-surface background."""
+    """.sidebar-item:hover must use accent border-color (not background change)."""
     css = read_css()
     assert ".sidebar-item:hover" in css
-    block = _extract_rule_block(css, ".sidebar-item:hover {")
-    assert "background: var(--bg-surface)" in block
+    assert ".sidebar-item:focus-visible" in css
+    block = _extract_rule_block(css, ".sidebar-item:hover")
+    assert "border-color: var(--accent)" in block
 
 
 def test_css_sidebar_item_active():
-    """.sidebar-item--active must have --bg-surface background and 3px accent left border."""
+    """.sidebar-item--active must have --bg-surface background and accent full border with 3px left."""
     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-left: 3px solid var(--accent)" in block
+    assert "border-color: var(--accent)" in block
+    assert "border-left-width: 3px" in block
 
 
 def test_css_sidebar_item_header():
diff --git a/frontend/style.css b/frontend/style.css
index b19e4df..9fb4ae8 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -416,6 +416,10 @@ body {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .sidebar-collapse-btn {
@@ -457,21 +461,25 @@ body {
 .sidebar-item {
   height: 120px;
   background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-subtle);
   cursor: pointer;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
 
-.sidebar-item:hover {
-  background: var(--bg-surface);
+.sidebar-item:hover,
+.sidebar-item:focus-visible {
+  border-color: var(--accent);
 }
 
 .sidebar-item--active {
   background: var(--bg-surface);
-  border-left: 3px solid var(--accent);
+  border-color: var(--accent);
+  border-left-width: 3px;
 }
 
 .sidebar-item-header {
@@ -502,6 +510,22 @@ body {
   overflow: hidden;
 }
 
+.sidebar-item-body::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  background: linear-gradient(to bottom, transparent, var(--bg-secondary));
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sidebar-item--active .sidebar-item-body::before {
+  background: linear-gradient(to bottom, transparent, var(--bg-surface));
+}
+
 .sidebar-item-body pre {
   position: absolute;
   bottom: 0;