From 0e270685e8f3a6899d4b2e46c23616ee5a30e084 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 12 Mar 2026 15:21:25 +0300
Subject: [PATCH] Remove collapsible section header from animation type
 selector

Animation section only has one field, so flatten it to a simple
form group with label instead of a details/summary wrapper.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../templates/modals/css-editor.html          | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/server/src/wled_controller/templates/modals/css-editor.html b/server/src/wled_controller/templates/modals/css-editor.html
index 1cfadf8..d9b1adb 100644
--- a/server/src/wled_controller/templates/modals/css-editor.html
+++ b/server/src/wled_controller/templates/modals/css-editor.html
@@ -619,23 +619,16 @@
                 </div>
 
                 <!-- Animation — shown for static/gradient, hidden for picture -->
-                <div id="css-editor-animation-section" style="display:none">
-                    <details class="form-collapse">
-                        <summary><span data-i18n="color_strip.animation">Animation</span></summary>
-                        <div class="form-collapse-body">
-                            <div class="form-group">
-                                <div class="label-row">
-                                    <label for="css-editor-animation-type" data-i18n="color_strip.animation.type">Effect:</label>
-                                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
-                                </div>
-                                <small class="input-hint" style="display:none" data-i18n="color_strip.animation.type.hint">The animation effect to apply. Available effects depend on source type. Select None to disable animation.</small>
-                                <select id="css-editor-animation-type" onchange="onAnimationTypeChange()">
-                                    <!-- populated by onCSSTypeChange() -->
-                                </select>
-                                <small id="css-editor-animation-type-desc" class="field-desc"></small>
-                            </div>
-                        </div>
-                    </details>
+                <div id="css-editor-animation-section" class="form-group" style="display:none">
+                    <div class="label-row">
+                        <label for="css-editor-animation-type" data-i18n="color_strip.animation">Animation:</label>
+                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
+                    </div>
+                    <small class="input-hint" style="display:none" data-i18n="color_strip.animation.type.hint">The animation effect to apply. Available effects depend on source type. Select None to disable animation.</small>
+                    <select id="css-editor-animation-type" onchange="onAnimationTypeChange()">
+                        <!-- populated by onCSSTypeChange() -->
+                    </select>
+                    <small id="css-editor-animation-type-desc" class="field-desc"></small>
                 </div>
 
                 <!-- Sync Clock (shown for animated types: static, gradient, color_cycle, effect) -->