Fix board selector label overlap

[franksong2702]

Thinking Path

• Hermes WebUI keeps the Kanban board switcher compact by rendering each board row as label, title, and count.
• The failing screenshot showed multi-character board labels such as layout-kanban overflowing from the fixed 18px icon slot into the title column.
• The root cause is layout-level: b.icon is documented as an emoji-ish icon, but existing board metadata can hold short text labels. The row needs to tolerate that without changing board data behavior.
• This PR fixes the CSS column contract so long labels remain inside their own cell and titles/count badges keep stable spacing.

Closes #2458.

What Changed

• Changed .kanban-board-switcher-item-icon from a fixed 18px slot to a bounded flex cell with min-width, max-width, overflow:hidden, and ellipsis behavior.
• Added a static regression test that pins the overflow/ellipsis/max-width invariants for long board labels.
• Added release-note-ready changelog text.
• Added generated fake-data before/after screenshots for review evidence.

Why It Matters

The board selector remains readable when board metadata uses colored text labels instead of a single emoji. This keeps the fix scoped to presentation and avoids changing board storage, API payloads, or switch behavior.

Screenshots

Before:

After:

Verification

• PYTHONPATH=$PWD python -m pytest tests/test_kanban_ui_static.py -q — 42 passed.
• git diff --check origin/master...HEAD — passed.
• GitHub Actions test (3.11), test (3.12), and test (3.13) — passed on the rebased head.
• Playwright fixture with fake board data verified positive gaps between columns:
  • layout-kanban: label/title gap 10px, title/count gap 10px.
  • kanban-square: label/title gap 10px, title/count gap 10px.
  • sparkles: label/title gap 10px, title/count gap 10px.

Risks / Follow-ups

• This only changes the board switcher row layout. It does not rename existing boards or validate board icon metadata.
• Very long labels are intentionally truncated with ellipsis instead of wrapping, preserving menu height and count alignment.

Model Used

AI assisted: OpenAI Codex (GPT-5) in the Codex desktop app, with local pytest and Playwright CLI verification.

[franksong2702]

Rebased this branch onto current master (f1d399b4 / stage-378), resolved the changelog conflict, and pushed the refreshed head:

• PR head: 80bed768de828e1c4d8b7d432f7170b0d67eb074
• Local verification: PYTHONPATH=$PWD python -m pytest tests/test_kanban_ui_static.py -q — 42 passed
• Local hygiene: git diff --check origin/master...HEAD — passed
• GitHub Actions on the rebased head: test (3.11), test (3.12), and test (3.13) — passed

I also marked the PR ready for review and refreshed the PR body/screenshots links. I tried to remove the hold label, but GitHub returned 403 Must have admin rights to Repository, so a maintainer will need to clear that label if this is ready to enter the normal review lane.

[nesquena-hermes]

Summary

Reading static/style.css:3813 on this branch against origin/master, and the rendering site at static/panels.js:2486-2492 (_renderKanbanBoardMenu), the CSS change matches the diagnosis I posted on #2458 cleanly. The icon column is the right place to defend against a long b.icon string, the new max-width:7.5rem lets short labels like layout-kanban render in full without overlapping the title or the count badge, and the test in tests/test_kanban_ui_static.py pins all the invariants that matter for the regression.

Code reference

The new rule at static/style.css:3816-3823:

.kanban-board-switcher-item-icon{
  display:block;
  font-size:14px;line-height:1.15;
  flex:0 1 auto;
  min-width:18px;max-width:7.5rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;
}

Paired with the regression test at tests/test_kanban_ui_static.py:877-895 which asserts overflow:hidden, text-overflow:ellipsis, white-space:nowrap, max-width:7.5rem, and min-width:18px are all present in the compiled rule. That test will catch a regression if any of those properties get stripped during a future refactor of the kanban switcher styles.

Diagnosis / Recommendation

The shape is correct and matches the suggested fix range. One small note worth thinking about for follow-up rather than this PR: display:block on a flex child works but is slightly redundant — flex children render block-ish by default — and flex:0 1 auto with min-width:18px;max-width:7.5rem is what actually does the column sizing. If you wanted to tighten that, dropping display:block would be no-op visually. Not blocking; the rule as written is fine.

The flex-shrink change is the meaningful behavioral difference vs origin/master. On master, the icon column had flex-shrink:0;width:18px, so a long icon value would render the text centered around the 18-px column without overflowing-hiding — the visible characters bled into the name column. With flex:0 1 auto plus the new max-width and ellipsis, the column owns its content and clips at the boundary. That's the right tradeoff for sidebar menus where space is finite.

Worth verifying manually that nothing else relies on flex-shrink:0 for that icon — grep -rn "kanban-board-switcher-item-icon" static/ shows it's only set in one place (the renderer at panels.js:2489) and only styled here, so the radius is contained. Good.

Test plan

CI's already green on the rebased head per your comment. For local verification:

PYTHONPATH=$PWD pytest tests/test_kanban_ui_static.py::test_kanban_board_switcher_icon_column_clamps_long_labels -v

For visual verification, the two before/after PNGs under docs/images/pr-2458-board-selector-{before,after}.png cover the regression case. If a maintainer wants to reproduce live, the path is: create a board with icon set to a long string like "layout-kanban", open the board switcher menu, and confirm the icon column truncates with an ellipsis inside its own column rather than bleeding into the title.

This is a clean, scoped CSS fix with a passing regression test, screenshots, and a CHANGELOG entry. Ready to land on a maintainer review.

[franksong2702]

Rebased #2459 onto current origin/master (e6be01c4 / v0.51.89) and pushed the refreshed head:\n\n- PR head: 9d6eb5f0df\n- Local verification: /Users/xuefusong/hermes-webui/.venv/bin/python -m pytest tests/test_kanban_ui_static.py -q — 42 passed\n- Local hygiene: git diff --check origin/master...HEAD — passed\n- GitHub Actions on the refreshed head: test (3.11), test (3.12), and test (3.13) — passed\n\nThe PR is back to CLEAN and remains scoped to the board selector long-label overlap fix.