From 3a4c663c0ec983f63b3fe49e24980ef2a75d44d0 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Fri, 13 Feb 2026 03:01:17 +0100
Subject: [PATCH] Enhance configuration layout and improve seasonal section
 handling

---
 .../Configuration/configPage.html             | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
index 2a1b89f..d49d95d 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
@@ -202,7 +202,7 @@
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
-                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select">
+                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Auto">Auto (Smart)</option>
                                 <option value="Maximum">Maximum (4K+)</option>
                                 <option value="1080p">1080p</option>
@@ -304,7 +304,7 @@
                         <h2 class="sectionTitle">Content Sorting</h2>
                         <div class="selectContainer">
                             <label class="selectLabel" for="SortBy">Sort By</label>
-                            <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select">
+                            <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Random">Random</option>
                                 <option value="Original">Original (Custom List Order)</option>
                                 <option value="PremiereDate">Premiere Date</option>
@@ -318,7 +318,7 @@
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="SortOrder">Sort Order</label>
-                            <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select">
+                            <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Ascending">Ascending</option>
                                 <option value="Descending">Descending</option>
                             </select>
@@ -534,23 +534,24 @@
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     container.innerHTML = '';
-                    sections.forEach(function(section) {
-                        MediaBarEnhancedConfigurationPage.createSectionElement(container, section);
+                    sections.forEach(function(section, index) {
+                        MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
                     });
                 },
 
                 addSeasonalSection: function(page) {
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
+                    var index = container.children.length + 1;
                     MediaBarEnhancedConfigurationPage.createSectionElement(container, {
                         Name: 'New Season',
                         StartDay: 1, StartMonth: 1,
                         EndDay: 1, EndMonth: 1,
                         MediaIds: ''
-                    });
+                    }, index);
                 },
 
-                createSectionElement: function(container, data) {
+                createSectionElement: function(container, data, index) {
                     var div = document.createElement('div');
                     div.className = 'seasonal-section';
                     div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
@@ -574,19 +575,22 @@
                         return h;
                     }
 
-                    div.innerHTML = '<div style="margin-bottom: 0.5em;">' +
-                        '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Season Name</label>' +
+                    var labelText = 'Season list #' + (index || 1);
+
+                    div.innerHTML =
+                        '<div class="inputContainer" style="margin-bottom: 0.5em;">' +
+                        '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
                         '    <div style="display: flex; align-items: center;">' +
                         '        <div style="flex-grow:1;">' +
                         '            <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
                         '        </div>' +
                         '        <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
                         '    </div>' +
-                        '    <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' +
+                        '    <div class="fieldDescription">Name of the season</div>' +
                         '</div>' +
-                        '<div style="margin-bottom: 1em;">' +
+                        '<div class="inputContainer" 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;">' +
+                        '    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; padding-left: 0.2em;">' +
                         '        <span>From:</span>' +
                                  mkSelect(data.StartDay, days, 'start-day') +
                                  mkSelect(data.StartMonth, months, 'start-month') +
@@ -596,7 +600,7 @@
                         '    </div>' +
                         '    <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
                         '</div>' +
-                        '<div>' +
+                        '<div class="inputContainer">' +
                         '    <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>' +