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

@@ -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 {

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 {

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>

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>

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>` : '')}

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>

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">

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>