Polish calibration UI: close buttons, icon footers, span/toggle sync, input toggle

- Add close X button to all modal headers (acts as Cancel)
- Replace Cancel/Save labels with icon buttons (✕/✓)
- Remove header/footer separator lines, reduce spacing
- Fix canvas re-render on resize via ResizeObserver
- Move calibration hint to top as section-tip
- Increase toggle zones to 16px, make borders more visible
- Differentiate min/max ticks (long) from intermediate (short)
- Sync toggle zones and ticks with span position
- Fix span handle z-index to stay above LED input
- Add total LED label click to toggle edge input visibility
- Remove corner icon scale on hover
- Direction arrows fixed at full-edge midpoint (unaffected by span)
- Span bars fill full edge area with 2px border radius

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

server/src/wled_controller/static/app.js

@@ -1092,6 +1092,15 @@ async function showCalibration(deviceId) {
         initSpanDrag();
         requestAnimationFrame(() => renderCalibrationCanvas());
 
+        // Re-render on container resize (e.g. window resize changes aspect-ratio container)
+        if (!window._calibrationResizeObserver) {
+            window._calibrationResizeObserver = new ResizeObserver(() => {
+                updateSpanBars();
+                renderCalibrationCanvas();
+            });
+        }
+        window._calibrationResizeObserver.observe(preview);
+
     } catch (error) {
         console.error('Failed to load calibration:', error);
         showToast('Failed to load calibration', 'error');
@@ -1116,6 +1125,9 @@ function forceCloseCalibrationModal() {
     if (deviceId) {
         clearTestMode(deviceId);
     }
+    if (window._calibrationResizeObserver) {
+        window._calibrationResizeObserver.disconnect();
+    }
     const modal = document.getElementById('calibration-modal');
     const error = document.getElementById('calibration-error');
     modal.style.display = 'none';
@@ -1198,9 +1210,9 @@ function renderCalibrationCanvas() {
     const containerRect = container.getBoundingClientRect();
     if (containerRect.width === 0 || containerRect.height === 0) return;
 
-    // Canvas extends beyond the container (matches CSS: left:-36px, top:-36px, +72px/+72px)
+    // Canvas extends beyond the container (matches CSS: left:-40px, top:-40px, +80px/+80px)
-    const padX = 36;
+    const padX = 40;
-    const padY = 36;
+    const padY = 40;
 
     const dpr = window.devicePixelRatio || 1;
     const canvasW = containerRect.width + padX * 2;
@@ -1259,8 +1271,8 @@ function renderCalibrationCanvas() {
         right:  { y1: oy + ch + (spans.right?.start || 0) * edgeLenV, y2: oy + ch + (spans.right?.end || 1) * edgeLenV, midX: ox + cW - cw / 2, horizontal: false },
     };
 
-    // Axis positions for labels (outside the 12px toggle zones)
+    // Axis positions for labels (outside the 16px toggle zones)
-    const toggleSize = 12;
+    const toggleSize = 16;
     const axisPos = {
         top:    oy - toggleSize - 3,
         bottom: oy + cH + toggleSize + 3,
@@ -1334,8 +1346,9 @@ function renderCalibrationCanvas() {
             }
         }
 
-        // Tick styling
+        // Tick styling — min/max ticks extend to container border, others short
-        const tickLen = 5;
+        const tickLenLong = toggleSize + 3;
+        const tickLenShort = 4;
         ctx.strokeStyle = tickStroke;
         ctx.lineWidth = 1;
         ctx.fillStyle = tickFill;
@@ -1345,6 +1358,7 @@ function renderCalibrationCanvas() {
             const fraction = count > 1 ? i / (count - 1) : 0.5;
             const displayFraction = seg.reverse ? (1 - fraction) : fraction;
             const ledIndex = totalLeds > 0 ? (seg.led_start + i) % totalLeds : seg.led_start + i;
+            const tickLen = (i === 0 || i === count - 1) ? tickLenLong : tickLenShort;
 
             if (geo.horizontal) {
                 const tx = geo.x1 + displayFraction * (geo.x2 - geo.x1);
@@ -1379,16 +1393,16 @@ function renderCalibrationCanvas() {
             }
         });
 
-        // Draw direction chevron at midpoint, inside the screen area
+        // Draw direction chevron at full-edge midpoint (not affected by span)
         const s = 7;
         let mx, my, angle;
         if (geo.horizontal) {
-            mx = (geo.x1 + geo.x2) / 2;
+            mx = ox + cw + edgeLenH / 2;
             my = arrowPos[seg.edge];
             angle = seg.reverse ? Math.PI : 0;
         } else {
             mx = arrowPos[seg.edge];
-            my = (geo.y1 + geo.y2) / 2;
+            my = oy + ch + edgeLenV / 2;
             angle = seg.reverse ? -Math.PI / 2 : Math.PI / 2;
         }
 
@@ -1414,6 +1428,7 @@ function renderCalibrationCanvas() {
 
 function updateSpanBars() {
     const spans = window.edgeSpans || {};
+    const container = document.querySelector('.calibration-preview');
     ['top', 'right', 'bottom', 'left'].forEach(edge => {
         const bar = document.querySelector(`.edge-span-bar[data-edge="${edge}"]`);
         if (!bar) return;
@@ -1430,6 +1445,24 @@ function updateSpanBars() {
             bar.style.top = (span.start * totalHeight) + 'px';
             bar.style.height = ((span.end - span.start) * totalHeight) + 'px';
         }
+
+        // Also reposition toggle zone to match span region
+        if (!container) return;
+        const toggle = container.querySelector(`.toggle-${edge}`);
+        if (!toggle) return;
+        if (isHorizontal) {
+            const cornerW = 56;
+            const edgeW = container.clientWidth - 2 * cornerW;
+            toggle.style.left = (cornerW + span.start * edgeW) + 'px';
+            toggle.style.right = 'auto';
+            toggle.style.width = ((span.end - span.start) * edgeW) + 'px';
+        } else {
+            const cornerH = 36;
+            const edgeH = container.clientHeight - 2 * cornerH;
+            toggle.style.top = (cornerH + span.start * edgeH) + 'px';
+            toggle.style.bottom = 'auto';
+            toggle.style.height = ((span.end - span.start) * edgeH) + 'px';
+        }
     });
 }
 
@@ -1537,6 +1570,11 @@ function setStartPosition(position) {
     updateCalibrationPreview();
 }
 
+function toggleEdgeInputs() {
+    const preview = document.querySelector('.calibration-preview');
+    if (preview) preview.classList.toggle('inputs-dimmed');
+}
+
 function toggleDirection() {
     const select = document.getElementById('cal-layout');
     select.value = select.value === 'clockwise' ? 'counterclockwise' : 'clockwise';

server/src/wled_controller/static/index.html

@@ -80,15 +80,17 @@
         <div class="modal-content" style="max-width: 700px;">
             <div class="modal-header">
                 <h2 data-i18n="calibration.title">📐 LED Calibration</h2>
+                <button class="modal-close-btn" onclick="closeCalibrationModal()" title="Close">&#x2715;</button>
             </div>
             <div class="modal-body">
                 <input type="hidden" id="calibration-device-id">
+                <p class="section-tip" data-i18n="calibration.preview.click_hint">Click an edge to toggle test LEDs on/off</p>
                 <!-- Interactive Preview with integrated LED inputs and test toggles -->
                 <div style="margin-bottom: 12px; padding: 0 24px;">
                     <div class="calibration-preview">
                         <!-- Screen with direction toggle, total LEDs, and offset -->
                         <div class="preview-screen">
-                            <div class="preview-screen-total"><span id="cal-total-leds-inline">0</span> / <span id="cal-device-led-count-inline">0</span></div>
+                            <div class="preview-screen-total" onclick="toggleEdgeInputs()" title="Toggle edge LED inputs"><span id="cal-total-leds-inline">0</span> / <span id="cal-device-led-count-inline">0</span></div>
                             <div class="preview-screen-controls">
                                 <button type="button" class="direction-toggle" onclick="toggleDirection()" title="Toggle direction">
                                     <span id="direction-icon">↻</span> <span id="direction-label">CW</span>
@@ -149,7 +151,6 @@
                         <!-- Canvas overlay for ticks, arrows, start label -->
                         <canvas id="calibration-preview-canvas"></canvas>
                     </div>
-                    <p class="preview-hint" data-i18n="calibration.preview.click_hint">Click an edge to toggle test LEDs on/off</p>
                 </div>
 
                 <!-- Hidden selects (used by saveCalibration) -->
@@ -170,8 +171,8 @@
                 <div id="calibration-error" class="error-message" style="display: none;"></div>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-secondary" onclick="closeCalibrationModal()" data-i18n="calibration.button.cancel">Cancel</button>
+                <button class="btn btn-icon btn-secondary" onclick="closeCalibrationModal()" title="Cancel">&#x2715;</button>
-                <button class="btn btn-primary" onclick="saveCalibration()" data-i18n="calibration.button.save">Save</button>
+                <button class="btn btn-icon btn-primary" onclick="saveCalibration()" title="Save">&#x2713;</button>
             </div>
         </div>
     </div>
@@ -181,6 +182,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2 data-i18n="settings.title">⚙️ Device Settings</h2>
+                <button class="modal-close-btn" onclick="closeDeviceSettingsModal()" title="Close">&#x2715;</button>
             </div>
             <div class="modal-body">
                 <form id="device-settings-form">
@@ -213,8 +215,8 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-secondary" onclick="closeDeviceSettingsModal()" data-i18n="settings.button.cancel">Cancel</button>
+                <button class="btn btn-icon btn-secondary" onclick="closeDeviceSettingsModal()" title="Cancel">&#x2715;</button>
-                <button class="btn btn-primary" onclick="saveDeviceSettings()" data-i18n="settings.button.save">Save Changes</button>
+                <button class="btn btn-icon btn-primary" onclick="saveDeviceSettings()" title="Save">&#x2713;</button>
             </div>
         </div>
     </div>
@@ -224,6 +226,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2 data-i18n="auth.title">🔑 Login to WLED Controller</h2>
+                <button class="modal-close-btn" id="modal-close-x-btn" onclick="closeApiKeyModal()" title="Close">&#x2715;</button>
             </div>
             <form id="api-key-form" onsubmit="submitApiKey(event)">
                 <div class="modal-body">
@@ -249,8 +252,8 @@
                     <div id="api-key-error" class="error-message" style="display: none;"></div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" data-i18n="auth.button.cancel">Cancel</button>
+                    <button type="button" class="btn btn-icon btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" title="Cancel">&#x2715;</button>
-                    <button type="submit" class="btn btn-primary" data-i18n="auth.button.login">Login</button>
+                    <button type="submit" class="btn btn-icon btn-primary" title="Login">&#x2713;</button>
                 </div>
             </form>
         </div>
@@ -261,6 +264,7 @@
         <div class="modal-content" style="max-width: 450px;">
             <div class="modal-header">
                 <h2 id="confirm-title">Confirm Action</h2>
+                <button class="modal-close-btn" onclick="closeConfirmModal(false)" title="Close">&#x2715;</button>
             </div>
             <div class="modal-body">
                 <p id="confirm-message" class="modal-description"></p>
@@ -277,6 +281,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2 data-i18n="devices.add">Add New Device</h2>
+                <button class="modal-close-btn" onclick="closeAddDeviceModal()" title="Close">&#x2715;</button>
             </div>
             <div class="modal-body">
                 <form id="add-device-form">
@@ -292,8 +297,8 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-secondary" onclick="closeAddDeviceModal()" data-i18n="calibration.button.cancel">Cancel</button>
+                <button class="btn btn-icon btn-secondary" onclick="closeAddDeviceModal()" title="Cancel">&#x2715;</button>
-                <button class="btn btn-primary" onclick="document.getElementById('add-device-form').requestSubmit()" data-i18n="device.button.add">Add Device</button>
+                <button class="btn btn-icon btn-primary" onclick="document.getElementById('add-device-form').requestSubmit()" title="Add Device">&#x2713;</button>
             </div>
         </div>
     </div>
@@ -390,8 +395,10 @@
             modal.style.display = 'flex';
             lockBody();
 
-            // Hide cancel button if this is required login (no existing session)
+            // Hide cancel button and close X if this is required login (no existing session)
             cancelBtn.style.display = hideCancel ? 'none' : 'inline-block';
+            const closeXBtn = document.getElementById('modal-close-x-btn');
+            if (closeXBtn) closeXBtn.style.display = hideCancel ? 'none' : '';
 
             setTimeout(() => input.focus(), 100);
         }

server/src/wled_controller/static/style.css

@@ -58,9 +58,8 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 0;
+    padding: 20px 0 10px;
-    border-bottom: 2px solid var(--border-color);
+    margin-bottom: 10px;
-    margin-bottom: 30px;
 }
 
 .header-title {
@@ -783,6 +782,9 @@ input:-webkit-autofill:focus {
 .modal-header {
     padding: 24px 24px 16px 24px;
     border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .modal-header h2 {
@@ -791,6 +793,27 @@ input:-webkit-autofill:focus {
     color: var(--text-color);
 }
 
+.modal-close-btn {
+    background: none;
+    border: none;
+    color: #777;
+    font-size: 1.2rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.2s, background 0.2s;
+    flex-shrink: 0;
+}
+
+.modal-close-btn:hover {
+    color: var(--text-color);
+    background: rgba(128, 128, 128, 0.15);
+}
+
 .modal-body {
     padding: 24px;
 }
@@ -850,11 +873,13 @@ input:-webkit-autofill:focus {
     padding: 16px 24px 24px 24px;
     display: flex;
     justify-content: flex-end;
-    gap: 12px;
+    gap: 8px;
 }
 
-.modal-footer .btn {
+.modal-footer .btn-icon {
-    min-width: 100px;
+    min-width: 60px;
+    padding: 10px 20px;
+    font-size: 1.4rem;
 }
 
 /* Theme Toggle */
@@ -875,9 +900,8 @@ input:-webkit-autofill:focus {
 
 /* Footer */
 .app-footer {
-    margin-top: 60px;
+    margin-top: 20px;
-    padding: 30px 0;
+    padding: 15px 0;
-    border-top: 1px solid var(--border-color);
     text-align: center;
 }
 
@@ -911,7 +935,7 @@ input:-webkit-autofill:focus {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
-    margin: 20px auto;
+    margin: 40px auto 20px;
     background: var(--card-bg);
     border: 2px solid var(--border-color);
     border-radius: 8px;
@@ -920,10 +944,10 @@ input:-webkit-autofill:focus {
 
 #calibration-preview-canvas {
     position: absolute;
-    top: -36px;
+    top: -40px;
-    left: -36px;
+    left: -40px;
-    width: calc(100% + 72px);
+    width: calc(100% + 80px);
-    height: calc(100% + 72px);
+    height: calc(100% + 80px);
     pointer-events: none;
     z-index: 3;
 }
@@ -950,12 +974,23 @@ input:-webkit-autofill:focus {
     font-weight: 600;
     opacity: 0.9;
     transition: color 0.2s;
+    cursor: pointer;
+    user-select: none;
+}
+
+.preview-screen-total:hover {
+    opacity: 1;
 }
 
 .preview-screen-total.mismatch {
     color: #FFC107;
 }
 
+.inputs-dimmed .edge-led-input {
+    opacity: 0.2;
+    pointer-events: none;
+}
+
 .preview-screen-controls {
     display: flex;
     align-items: center;
@@ -1011,8 +1046,8 @@ input:-webkit-autofill:focus {
     position: absolute;
     cursor: pointer;
     z-index: 1;
-    background: rgba(128, 128, 128, 0.08);
+    background: rgba(128, 128, 128, 0.1);
-    border: 1px solid rgba(128, 128, 128, 0.15);
+    border: 1px solid rgba(128, 128, 128, 0.35);
     border-radius: 3px;
     transition: background 0.2s, box-shadow 0.2s;
 }
@@ -1022,31 +1057,31 @@ input:-webkit-autofill:focus {
 }
 
 .toggle-top {
-    top: -12px;
+    top: -16px;
     left: 56px;
     right: 56px;
-    height: 12px;
+    height: 16px;
 }
 
 .toggle-bottom {
-    bottom: -12px;
+    bottom: -16px;
     left: 56px;
     right: 56px;
-    height: 12px;
+    height: 16px;
 }
 
 .toggle-left {
-    left: -12px;
+    left: -16px;
     top: 36px;
     bottom: 36px;
-    width: 12px;
+    width: 16px;
 }
 
 .toggle-right {
-    right: -12px;
+    right: -16px;
     top: 36px;
     bottom: 36px;
-    width: 12px;
+    width: 16px;
 }
 
 .edge-top {
@@ -1127,9 +1162,8 @@ input:-webkit-autofill:focus {
     position: absolute;
     background: rgba(76, 175, 80, 0.3);
     border: 1px solid rgba(76, 175, 80, 0.5);
-    border-radius: 3px;
+    border-radius: 2px;
     cursor: grab;
-    z-index: 1;
     transition: background 0.15s;
 }
 
@@ -1144,22 +1178,22 @@ input:-webkit-autofill:focus {
 /* Horizontal edges: bar spans left-right */
 .edge-top .edge-span-bar,
 .edge-bottom .edge-span-bar {
-    top: 2px;
+    top: 0;
-    bottom: 2px;
+    bottom: 0;
 }
 
 /* Vertical edges: bar spans top-bottom */
 .edge-left .edge-span-bar,
 .edge-right .edge-span-bar {
-    left: 2px;
+    left: 0;
-    right: 2px;
+    right: 0;
 }
 
 /* Resize handles — large transparent hit area with narrow visible strip */
 .edge-span-handle {
     position: absolute;
     background: transparent;
-    z-index: 2;
+    z-index: 3;
     opacity: 0;
     transition: opacity 0.15s;
 }
@@ -1255,7 +1289,6 @@ input:-webkit-autofill:focus {
 
 .preview-corner:hover {
     color: rgba(76, 175, 80, 0.6);
-    transform: scale(1.2);
 }
 
 .preview-corner.active:hover {
@@ -1321,12 +1354,8 @@ input:-webkit-autofill:focus {
         margin: 20px;
     }
 
-    .modal-footer {
-        flex-direction: column-reverse;
-    }
-
     .modal-footer .btn {
-        width: 100%;
+        min-width: 80px;
     }
 }