syslog status: ellipsize long card titles (align card chrome with hmib/intropage)

[TheWitness]

Review of the Syslog Status card chrome against the hmib and intropage/mactrack
card systems, with the one concrete gap fixed.

Findings — the card systems are already consistent

All four plugins render the same card template, each with its own class prefix
(this is by design — the chrome is bundled per-plugin with no cross-plugin
dependency):

	syslog	hmib	mactrack	intropage
grid / card / header / body	syslogStatusCard*	hmibDashCard*	mtdashCard*	cc*
drag handle	left, <button>, fa-bars	same	same	same
tools (data-tool)	expand/collapse/maximize/refresh/remove	same	same	same
reorder	HTML5 drag + keyboard arrows, handle-only	same	same	same
layout persistence	settings_user JSON	same	same	DB
severity	header --up/recovering/down/none wash	same	bars	color_*

So structurally and behaviourally they already match. Two intentional
differences (left as-is, not defects):

• Theming: Syslog samples the active theme into --search-* variables (to
  paint a native html_start_box title bar); hmib/mactrack use
  color-mix(currentColor …) directly. Both are theme-correct.
• Hover-reflow fix: Syslog reserves a transparent 1px border (syslog status: stop card header reflow on tool/handle hover #408);
  hmib uses border: 0 + background-only hover. Syslog's is the more defensive
  of the two.

The one real gap (fixed here)

Syslog's .syslogStatusCardTitle was missing white-space: nowrap +
overflow: hidden + text-overflow: ellipsis, which hmib, mactrack and
intropage all already have. Consequences:

• A long card title wrapped onto a second line, making that card's header
  taller than its neighbours.
• During an HTML5 drag the card's width changes, which re-wrapped the title
  and visibly changed the header height when you grabbed the card by the
  hamburger — the reported "the title changes height" behaviour.

The fix keeps the title to a single line with an ellipsis, matching the other
plugins, so the header height is stable regardless of title length or drag.

CSS-only, one rule. (The earlier hover/focus reflow was already fixed in #408.)

[Copilot]

🟢 Approval recommended

The focused CSS change correctly uses the existing flex sizing to truncate long titles without reflow.

0 open findings

What changed in this PR

Adds stable single-line card titles to the Syslog Status interface.

Changes:

• Prevents long titles from wrapping.
• Adds ellipsis when titles exceed available width.
• Keeps header height stable during drag operations.

File	Description
css/​search.css	Adds title truncation styles to Status cards.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.