From fe7fd8d539683b81dfbca26e644671596430120b Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Fri, 13 Mar 2026 02:08:47 +0300
Subject: [PATCH] Truncate long card titles with ellipsis and reduce font size

- Replace flex-wrap with overflow ellipsis on .card-title and .template-name
- Reduce card title font size from 1.2rem/18px to 1.05rem
- Add title attribute (hover tooltip) on all card types for full name

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/src/wled_controller/static/css/cards.css      | 12 +++++++-----
 server/src/wled_controller/static/css/streams.css    |  8 +++++++-
 .../static/js/features/automations.js                |  2 +-
 .../static/js/features/color-strips.js               |  2 +-
 .../wled_controller/static/js/features/devices.js    |  2 +-
 .../wled_controller/static/js/features/kc-targets.js |  2 +-
 .../static/js/features/scene-presets.js              |  2 +-
 .../wled_controller/static/js/features/targets.js    |  2 +-
 8 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/server/src/wled_controller/static/css/cards.css b/server/src/wled_controller/static/css/cards.css
index 75e09e3..12c71a0 100644
--- a/server/src/wled_controller/static/css/cards.css
+++ b/server/src/wled_controller/static/css/cards.css
@@ -413,16 +413,18 @@ body.cs-drag-active .card-drag-handle {
 }
 
 .card-title {
-    font-size: 1.2rem;
+    font-size: 1.05rem;
     font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-wrap: wrap;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
 }
 
 .card-title > .icon {
     color: var(--primary-text-color);
+    vertical-align: middle;
+    margin-right: 6px;
 }
 
 .device-url-badge {
diff --git a/server/src/wled_controller/static/css/streams.css b/server/src/wled_controller/static/css/streams.css
index 6f90ac1..3deda18 100644
--- a/server/src/wled_controller/static/css/streams.css
+++ b/server/src/wled_controller/static/css/streams.css
@@ -74,13 +74,19 @@
 }
 
 .template-name {
-    font-size: 18px;
+    font-size: 1.05rem;
     font-weight: bold;
     color: var(--text-color);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
 }
 
 .template-name > .icon {
     color: var(--primary-text-color);
+    vertical-align: middle;
+    margin-right: 6px;
 }
 
 .badge {
diff --git a/server/src/wled_controller/static/js/features/automations.js b/server/src/wled_controller/static/js/features/automations.js
index 518f56e..09e5b78 100644
--- a/server/src/wled_controller/static/js/features/automations.js
+++ b/server/src/wled_controller/static/js/features/automations.js
@@ -201,7 +201,7 @@ function createAutomationCard(automation, sceneMap = new Map()) {
         removeTitle: t('common.delete'),
         content: `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" title="${escapeHtml(automation.name)}">
                     ${escapeHtml(automation.name)}
                     <span class="badge badge-automation-${statusClass}">${statusText}</span>
                 </div>
diff --git a/server/src/wled_controller/static/js/features/color-strips.js b/server/src/wled_controller/static/js/features/color-strips.js
index aa3d00b..06cc756 100644
--- a/server/src/wled_controller/static/js/features/color-strips.js
+++ b/server/src/wled_controller/static/js/features/color-strips.js
@@ -1271,7 +1271,7 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
         removeTitle: t('common.delete'),
         content: `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" title="${escapeHtml(source.name)}">
                     ${icon} ${escapeHtml(source.name)}
                 </div>
             </div>
diff --git a/server/src/wled_controller/static/js/features/devices.js b/server/src/wled_controller/static/js/features/devices.js
index a99d3ef..dddb04a 100644
--- a/server/src/wled_controller/static/js/features/devices.js
+++ b/server/src/wled_controller/static/js/features/devices.js
@@ -107,7 +107,7 @@ export function createDeviceCard(device) {
         removeTitle: t('device.button.remove'),
         content: `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" title="${escapeHtml(device.name || device.id)}">
                     <span class="health-dot ${healthClass}" title="${healthTitle}"></span>
                     ${device.name || device.id}
                     ${device.url && device.url.startsWith('http') ? `<a class="device-url-badge" href="${device.url}" target="_blank" rel="noopener" title="${t('device.button.webui')}"><span class="device-url-text">${escapeHtml(device.url.replace(/^https?:\/\//, ''))}</span><span class="device-url-icon">${ICON_WEB}</span></a>` : (device.url && !device.url.startsWith('mock://') && !device.url.startsWith('ws://') && !device.url.startsWith('openrgb://') && !device.url.startsWith('http') ? `<span class="device-url-badge"><span class="device-url-text">${escapeHtml(device.url)}</span></span>` : '')}
diff --git a/server/src/wled_controller/static/js/features/kc-targets.js b/server/src/wled_controller/static/js/features/kc-targets.js
index 2a80855..6771fa0 100644
--- a/server/src/wled_controller/static/js/features/kc-targets.js
+++ b/server/src/wled_controller/static/js/features/kc-targets.js
@@ -222,7 +222,7 @@ export function createKCTargetCard(target, sourceMap, patternTemplateMap, valueS
         removeTitle: t('common.delete'),
         content: `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" title="${escapeHtml(target.name)}">
                     ${escapeHtml(target.name)}
                 </div>
             </div>
diff --git a/server/src/wled_controller/static/js/features/scene-presets.js b/server/src/wled_controller/static/js/features/scene-presets.js
index bfe3e1a..788f7ec 100644
--- a/server/src/wled_controller/static/js/features/scene-presets.js
+++ b/server/src/wled_controller/static/js/features/scene-presets.js
@@ -60,7 +60,7 @@ export function createSceneCard(preset) {
             <button class="card-remove-btn" onclick="deleteScenePreset('${preset.id}', '${escapeHtml(preset.name)}')" title="${t('scenes.delete')}">&#x2715;</button>
         </div>
         <div class="card-header">
-            <div class="card-title">${escapeHtml(preset.name)}</div>
+            <div class="card-title" title="${escapeHtml(preset.name)}">${escapeHtml(preset.name)}</div>
         </div>
         ${preset.description ? `<div class="card-subtitle"><span class="card-meta">${escapeHtml(preset.description)}</span></div>` : ''}
         <div class="stream-card-props">
diff --git a/server/src/wled_controller/static/js/features/targets.js b/server/src/wled_controller/static/js/features/targets.js
index 48945e1..81af8a0 100644
--- a/server/src/wled_controller/static/js/features/targets.js
+++ b/server/src/wled_controller/static/js/features/targets.js
@@ -1001,7 +1001,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap, valueSo
         removeTitle: t('common.delete'),
         content: `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" title="${escapeHtml(target.name)}">
                     <span class="health-dot ${healthClass}" title="${healthTitle}"></span>
                     ${escapeHtml(target.name)}
                     <span class="target-error-indicator" title="${t('device.metrics.errors')}">${ICON_WARNING}</span>