Add LED type detection, improve device card layout

- Detect LED chip type (WS2812B, SK6812, etc.) from WLED /json/cfg
- Show RGBW/RGB channel indicator with colored squares on device card
- Move version, display index, LED count to subtitle row under device name
- Add remove button as × icon in top-right corner of card
- Hide latency from card display (still visible in health dot tooltip)
- Fix display layout overflow on narrow viewports
- Add wled_rgbw and wled_led_type to ProcessingState API schema

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/app.js

@@ -327,9 +327,10 @@ function renderDisplayLayout(displays) {
     const totalWidth = maxX - minX;
     const totalHeight = maxY - minY;
 
-    // Scale factor to fit in canvas (600px wide max, maintain aspect ratio)
-    const maxCanvasWidth = 600;
-    const maxCanvasHeight = 350;
+    // Scale factor to fit in canvas (respect available width, maintain aspect ratio)
+    const availableWidth = canvas.clientWidth - 60; // account for padding
+    const maxCanvasWidth = Math.min(600, availableWidth);
+    const maxCanvasHeight = 450;
     const scaleX = maxCanvasWidth / totalWidth;
     const scaleY = maxCanvasHeight / totalHeight;
     const scale = Math.min(scaleX, scaleY, 0.3); // Max 0.3 scale to keep monitors reasonably sized
@@ -489,8 +490,8 @@ function createDeviceCard(device) {
         healthTitle = `${t('device.health.online')}`;
         if (wledName) healthTitle += ` - ${wledName}`;
         if (wledVersion) healthTitle += ` v${wledVersion}`;
-        healthLabel = wledLatency !== null && wledLatency !== undefined
-            ? `<span class="health-latency">${Math.round(wledLatency)}ms</span>` : '';
+        if (wledLatency !== null && wledLatency !== undefined) healthTitle += ` (${Math.round(wledLatency)}ms)`;
+        healthLabel = '';
     } else {
         healthClass = 'health-offline';
         healthTitle = t('device.health.offline');
@@ -498,21 +499,27 @@ function createDeviceCard(device) {
         healthLabel = `<span class="health-latency offline">${t('device.health.offline')}</span>`;
     }
 
+    const displayIndex = settings.display_index !== undefined ? settings.display_index : 0;
+    const ledCount = state.wled_led_count || device.led_count;
+
     return `
         <div class="card" data-device-id="${device.id}">
+            <button class="card-remove-btn" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">&#x2715;</button>
             <div class="card-header">
                 <div class="card-title">
                     <span class="health-dot ${healthClass}" title="${healthTitle}"></span>
                     ${device.name || device.id}
-                    ${wledVersion ? `<span class="wled-version">v${wledVersion}</span>` : ''}
                     ${healthLabel}
-                </div>
-                <div class="card-header-badges">
-                    <span class="display-badge" title="${t('device.display')} ${settings.display_index !== undefined ? settings.display_index : 0}">🖥️${settings.display_index !== undefined ? settings.display_index : 0}</span>
-                    ${state.wled_led_count ? `<span class="led-count-badge" title="${t('device.led_count')} ${state.wled_led_count}">💡${state.wled_led_count}</span>` : ''}
                     ${isProcessing ? `<span class="badge processing">${t('device.status.processing')}</span>` : ''}
                 </div>
             </div>
+            <div class="card-subtitle">
+                ${wledVersion ? `<span class="card-meta">v${wledVersion}</span>` : ''}
+                <span class="card-meta" title="${t('device.display')}">🖥️ ${displayIndex}</span>
+                ${ledCount ? `<span class="card-meta" title="${t('device.led_count')}">💡 ${ledCount}</span>` : ''}
+                ${state.wled_led_type ? `<span class="card-meta">🔌 ${state.wled_led_type.replace(/ RGBW$/, '')}</span>` : ''}
+                <span class="card-meta" title="${state.wled_rgbw ? 'RGBW' : 'RGB'}"><span class="channel-indicator"><span class="ch" style="background:#e53935"></span><span class="ch" style="background:#43a047"></span><span class="ch" style="background:#1e88e5"></span>${state.wled_rgbw ? '<span class="ch" style="background:#eee"></span>' : ''}</span></span>
+            </div>
             <div class="card-content">
                 <div class="info-row">
                     <span class="info-label">${t('device.url')}</span>
@@ -565,9 +572,6 @@ function createDeviceCard(device) {
                 <button class="btn btn-icon btn-secondary" onclick="showPixelPreview('${device.id}')" title="${t('preview.button')}">
                     👁️
                 </button>
-                <button class="btn btn-icon btn-danger" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">
-                    🗑️
-                </button>
             </div>
         </div>
     `;