From f4dcf435ae9d9777df0371aa1468c397cd92fb9e Mon Sep 17 00:00:00 2001 From: Raj Pabnani Date: Mon, 18 May 2026 18:37:22 +0530 Subject: [PATCH] Fix Kanban board selector long slug layout --- CHANGELOG.md | 4 +++ static/panels.js | 3 +- static/style.css | 11 ++++++-- ..._issue2458_kanban_board_switcher_layout.py | 28 +++++++++++++++++++ 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 tests/test_issue2458_kanban_board_switcher_layout.py diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e938441e76..66139e336b4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/static/panels.js b/static/panels.js index d52439f1509..9f3fde386aa 100644 --- a/static/panels.js +++ b/static/panels.js @@ -2487,7 +2487,8 @@ function _renderKanbanBoardMenu(boards, current){ const colorStyle = safeColor ? `color:${safeColor}` : ''; return ``; }).join(''); diff --git a/static/style.css b/static/style.css index 7a594b90ae8..682e2c01f33 100644 --- a/static/style.css +++ b/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); diff --git a/tests/test_issue2458_kanban_board_switcher_layout.py b/tests/test_issue2458_kanban_board_switcher_layout.py new file mode 100644 index 00000000000..092c420630b --- /dev/null +++ b/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 || '')}" 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