Fix Kanban board selector long slug layout

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix the Kanban board selector menu layout for long board keys/slugs by rendering the slug in its own truncated monospace chip column, keeping the board title and task count in separate columns so long keys cannot overlap adjacent text.
+
 ## [v0.51.89] — 2026-05-18 — Release BM (stage-382 — 6-PR full sweep batch — runtime adapter approval/clarify seam + SOUL.md memory panel + #1855 resolve_model_provider fast-path + PWA sidebar spinner fix + /model active-provider preference + contributor contract docs index)
 
 ### Changed

static/panels.js

@@ -2487,7 +2487,8 @@ function _renderKanbanBoardMenu(boards, current){
     const colorStyle = safeColor ? `color:${safeColor}` : '';
     return `<button type="button" class="kanban-board-switcher-item ${isCurrent ? 'is-current' : ''}" role="menuitem" data-board-slug="${esc(b.slug)}" onclick="switchKanbanBoard('${esc(b.slug)}')">
       <span class="kanban-board-switcher-item-icon" style="${colorStyle}">${icon || (isCurrent ? '✓' : '')}</span>
-      <span class="kanban-board-switcher-item-name">${esc(b.name || b.slug)}</span>
+      <span class="kanban-board-switcher-item-slug" title="${esc(b.slug || '')}">${esc(b.slug || '')}</span>
+      <span class="kanban-board-switcher-item-name" title="${esc(b.name || b.slug)}">${esc(b.name || b.slug)}</span>
       <span class="kanban-board-switcher-item-count">${esc(String(total))}</span>
     </button>`;
   }).join('');

static/style.css

@@ -3793,7 +3793,7 @@ main.main.showing-insights > #mainInsights{display:flex;overflow-y:auto;}
 .kanban-board-switcher-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .kanban-board-switcher-menu{
   position:absolute;top:calc(100% + 4px);left:0;
-  min-width:240px;max-width:320px;
+  min-width:300px;max-width:420px;
   background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));
   border:1px solid var(--accent-bg-strong, var(--border));
   border-radius:10px;
@@ -3809,7 +3809,7 @@ main.main.showing-insights > #mainInsights{display:flex;overflow-y:auto;}
 }
 .kanban-board-switcher-menu[hidden]{display:none;}
 .kanban-board-switcher-item{
-  display:flex;align-items:center;gap:10px;width:100%;
+  display:grid;grid-template-columns:18px minmax(72px,96px) minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;
   padding:8px 10px;border:0;background:transparent;color:var(--text);
   border-radius:6px;cursor:pointer;text-align:left;font:inherit;font-size:12px;
   transition:background .15s;
@@ -3818,6 +3818,13 @@ main.main.showing-insights > #mainInsights{display:flex;overflow-y:auto;}
 .kanban-board-switcher-item:focus{background:var(--accent-bg);outline:none;}
 .kanban-board-switcher-item.is-current{font-weight:650;}
 .kanban-board-switcher-item-icon{font-size:14px;line-height:1;flex-shrink:0;width:18px;text-align:center;}
+.kanban-board-switcher-item-slug{
+  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;
+  color:var(--accent-text);background:var(--accent-bg);
+  border:1px solid var(--accent-bg-strong);border-radius:999px;
+  padding:1px 6px;text-align:center;
+}
 .kanban-board-switcher-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .kanban-board-switcher-item-count{
   flex-shrink:0;font-size:10px;color:var(--muted);

tests/test_issue2458_kanban_board_switcher_layout.py

@@ -0,0 +1,28 @@
+"""Regression coverage for #2458 Kanban board selector long-key layout."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+PANELS = (ROOT / "static" / "panels.js").read_text(encoding="utf-8")
+STYLE = (ROOT / "static" / "style.css").read_text(encoding="utf-8")
+
+
+def test_kanban_board_menu_renders_dedicated_slug_column():
+    """Long board keys should not share the same flex cell as the title."""
+    assert "kanban-board-switcher-item-slug" in PANELS
+    assert 'title="${esc(b.slug || \'\')}"' in PANELS
+    assert "${esc(b.slug || '')}</span>" in PANELS
+    assert "kanban-board-switcher-item-name" in PANELS
+    assert 'title="${esc(b.name || b.slug)}"' in PANELS
+
+
+def test_kanban_board_menu_uses_separate_truncated_grid_columns():
+    """Slug, title, and count stay in separate columns with truncation."""
+    assert ".kanban-board-switcher-item{" in STYLE
+    assert "display:grid" in STYLE
+    assert "grid-template-columns:18px minmax(72px,96px) minmax(0,1fr) auto" in STYLE
+    assert ".kanban-board-switcher-item-slug" in STYLE
+    assert "overflow:hidden;text-overflow:ellipsis;white-space:nowrap" in STYLE
+    assert "font-family:'SF Mono',ui-monospace,Menlo,monospace" in STYLE