Fix Kanban board selector long slug layout

[RajPabnani03]

Summary

• Fixes Board selector menu items overlap for long board keys #2458.
• Render the Kanban board slug/key in its own truncated monospace chip column.
• Keep board title and task count in separate columns so long keys cannot overlap adjacent text.
• Add static regression coverage for the board switcher markup/CSS contract.

Verification

• . .venv-test/bin/activate && python -m pytest tests/test_issue2458_kanban_board_switcher_layout.py tests/test_issue1823_kanban_not_found.py -q: passed (10 passed in 4.69s)

Notes

• Browser screenshot verification was not run locally because no Chromium/Chrome/Playwright browser binary is installed in this environment; this PR includes targeted static UI regression checks for the layout contract.

[nesquena-hermes]

Summary

Reading static/style.css:3793-3829 and static/panels.js:2487-2493 on this branch against origin/master, this PR takes a different (and arguably stronger) approach to #2458 than the parallel PR #2459:

• PR Fix board selector label overlap #2459 keeps the existing 4-element flex row and widens the .kanban-board-switcher-item-icon slot from a fixed 18px to a bounded flex cell with min-width:18px;max-width:7.5rem; plus ellipsis. It tolerates long text labels in the icon slot but doesn't change the row's column structure.

• This PR (Fix Kanban board selector long slug layout #2525) switches the row from flex to an explicit 4-column CSS grid (grid-template-columns:18px minmax(72px,96px) minmax(0,1fr) auto) and introduces a dedicated .kanban-board-switcher-item-slug chip that carries the slug as its own pill, so the icon slot stays a single-character emoji while the slug gets a deterministic column with monospace styling and ellipsis. The grid layout makes the count badge alignment stable across rows regardless of how long the title or slug is.

The grid approach is the cleaner design for the long-label problem. The icon-cell PR conflates "icon" with "label" semantics; this PR keeps them separate columns.

Code reference

The new row template at static/panels.js:2488-2492:

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-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>`;

And the grid container at static/style.css:3812:

.kanban-board-switcher-item{
  display:grid;grid-template-columns:18px minmax(72px,96px) minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;
  ...
}

The new slug chip styling at style.css:3821-3827:

.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;
}

Diagnosis / Recommendation

The change is well-scoped and the design is right. A few notes:

1. PR #2459 conflict. Both PRs touch .kanban-board-switcher-item and .kanban-board-switcher-item-icon. Whichever lands first will create a merge conflict for the other. Worth flagging — I left a similar note on #2459 in a previous pass. The two PRs have meaningfully different visual outcomes (slug-as-pill column vs. icon-cell-tolerates-text), so this is a real product choice for the maintainer, not just a duplicate cleanup.

2. The minmax(0,1fr) on the title column is the right pattern. Without minmax(0,...), a grid track's min-content includes the full unbroken string, which would cause overflow rather than ellipsis. The min-width:0 on the title span pairs with this to actually trigger ellipsis. That's exactly the contract that gets the long-key case to behave.

3. font-family:'SF Mono',ui-monospace,Menlo,monospace is macOS-friendly but doesn't include a Linux monospace fallback. On Linux without SF Mono, the chain falls through to ui-monospace (well-supported), then Menlo (absent), then the generic monospace. That's fine in practice. If you want a tighter chain, 'SF Mono',ui-monospace,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace is more portable, but the current choice is harmless.

4. The .kanban-board-switcher-menu min/max widened from 240/320px to 300/420px. That's a real consequence of the new 4-column layout — the slug pill plus a long title plus a count needs more horizontal room. Worth a manual check at the narrowest sidebar state to make sure the menu doesn't clip the right edge of the sidebar on mobile/narrow.

5. The regression test at tests/test_issue2458_kanban_board_switcher_layout.py pins the new grid contract (slug element exists, grid-template-columns value, minmax(0,1fr) for the title cell). That's the right level of static coverage for a CSS-shape change without Playwright. Without a Playwright fixture you can't confirm the rendered overflow behavior, but the structural pinning is solid.

Verification

• The grid template tracks the slug column at fixed minmax(72px,96px), which constrains the slug width but allows ellipsis within. Long slugs render as a pill with …; short slugs sit comfortably.
• The grid removes the flex-shrink:0 dependency on the icon and count — those used to be implicit in the flex layout but are now load-bearing on the explicit grid track sizes.
• No JS contract changes to the underlying board metadata; the slug rendering reuses b.slug which is already always present.

Solid PR. The main open question is the coordination with #2459 — both PRs solve #2458 but with meaningfully different layouts; the maintainer picks one.

[nesquena-hermes]

Closing as parallel-discovery superseded by #2459

Thanks for the careful work on #2458, @RajPabnani03 — closing this in favor of #2459 which lands the same Kanban board switcher layout fix:

• Fix board selector label overlap #2459 was opened first (May 17) and has been rebased twice onto current master to keep CI green,
• carries before/after screenshots at docs/images/pr-2458-board-selector-{before,after}.png,
• agent diff review on both is positive — the two approaches are differently shaped (you split the slug into its own column; Fix board selector label overlap #2459 widens the icon cell to a bounded flex slot) but both keep long labels inside their own cell and titles/count badges stable,
• I'm picking the older + already-rebased PR per the parallel-discovery convention.

The regression coverage you added in tests/test_issue2458_kanban_board_switcher_layout.py is well-shaped — if there's a follow-up edge case after #2459 ships, feel free to open a smaller PR with just the additional tests + a targeted assertion. Appreciate the contribution.