From a1df756c563da0c3987264b8a5b6a2a3d3f006b4 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Fri, 13 Feb 2026 01:40:33 +0100
Subject: [PATCH] Enhance seasonal section input fields with improved layout
 and descriptions

---
 .../Configuration/configPage.html             | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
index b7ee732..853ee0d 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
@@ -165,7 +165,7 @@
                             <div id="seasonalSectionsList"></div>
                             <button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
                                 style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
-                                <i class="md-icon">add</i>
+                                <i class="material-icons" style="font-size: 24px;">add</i>
                                 <span>Add Season</span>
                             </button>
                         </div>
@@ -574,21 +574,30 @@
                         return h;
                     }
 
-                    div.innerHTML = `
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;">
-                            <input is="emby-input" type="text" class="emby-input section-name" value="${data.Name}" placeholder="Season Name" style="flex: 1; margin-right: 1em; font-weight: bold;">
-                            <button type="button" class="raised emby-button remove-section" style="background: #a94442;">Remove</button>
-                        </div>
-                        <div style="margin-bottom: 0.5em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">
-                            <span>From:</span>
-                            ${mkSelect(data.StartDay, days, 'start-day')}
-                            ${mkSelect(data.StartMonth, months, 'start-month')}
-                            <span style="margin-left: 1em;">To:</span>
-                            ${mkSelect(data.EndDay, days, 'end-day')}
-                            ${mkSelect(data.EndMonth, months, 'end-month')}
-                        </div>
-                        <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;" placeholder="Media IDs...">${data.MediaIds || ''}</textarea>
-                    `;
+                    div.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;">' +
+                        '    <div style="flex-grow:1; margin-right:1em;">' +
+                        '        <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" label="Season Name" />' +
+                        '        <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' +
+                        '    </div>' +
+                        '    <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset;">Remove</button>' +
+                        '</div>' +
+                        '<div style="margin-bottom: 1em;">' +
+                        '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
+                        '    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
+                        '        <span>From:</span>' +
+                                 mkSelect(data.StartDay, days, 'start-day') +
+                                 mkSelect(data.StartMonth, months, 'start-month') +
+                        '        <span style="margin-left: 1em;">To:</span>' +
+                                 mkSelect(data.EndDay, days, 'end-day') +
+                                 mkSelect(data.EndMonth, months, 'end-month') +
+                        '    </div>' +
+                        '    <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
+                        '</div>' +
+                        '<div>' +
+                        '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
+                        '    <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
+                        '    <div class="fieldDescription">Comma-separated list of Movie/Series/Collection IDs to show during this season.</div>' +
+                        '</div>';
 
                     div.querySelector('.remove-section').addEventListener('click', function() {
                         div.remove();