Update queue delay input validation and UI constraints for improved user experience

Author: MaxITService

floating-panel-ui-queue.js

@@ -54,11 +54,15 @@ window.MaxExtensionFloatingPanel.initializeQueueSection = function () {
         if (unit === 'sec') {
             this.delayUnitToggle.textContent = 'sec';
             this.delayInputElement.value = window.globalMaxExtensionConfig.queueDelaySeconds;
-            this.delayInputElement.title = "Delay in seconds between sending each queued prompt. Minimum 2 seconds.";
-        } else {
+            this.delayInputElement.min = 15;
+            this.delayInputElement.max = 64000;
+            this.delayInputElement.title = "Delay in seconds between sending each queued prompt. Min: 15, Max: 64000.";
+        } else { // 'min'
             this.delayUnitToggle.textContent = 'min';
             this.delayInputElement.value = window.globalMaxExtensionConfig.queueDelayMinutes;
-            this.delayInputElement.title = "Delay in minutes between sending each queued prompt. Minimum 2 minutes.";
+            this.delayInputElement.min = 1;
+            this.delayInputElement.max = 64000;
+            this.delayInputElement.title = "Delay in minutes between sending each queued prompt. Min: 1, Max: 64000.";
         }
     };
     updateDelayUI();
@@ -72,14 +76,20 @@ window.MaxExtensionFloatingPanel.initializeQueueSection = function () {
 
     this.delayInputElement.addEventListener('change', (event) => {
         let delay = parseInt(event.target.value, 10);
-        if (isNaN(delay) || delay < 2) {
-            delay = 2;
-            event.target.value = delay;
+        const unit = window.globalMaxExtensionConfig.queueDelayUnit || 'min';
+        const minDelay = (unit === 'sec') ? 15 : 1;
+        const maxDelay = 64000;
+
+        if (isNaN(delay) || delay < minDelay) {
+            delay = minDelay;
+        } else if (delay > maxDelay) {
+            delay = maxDelay;
         }
+        event.target.value = delay;
 
-        if (window.globalMaxExtensionConfig.queueDelayUnit === 'sec') {
+        if (unit === 'sec') {
             window.globalMaxExtensionConfig.queueDelaySeconds = delay;
-        } else {
+        } else { // 'min'
             window.globalMaxExtensionConfig.queueDelayMinutes = delay;
         }
         this.saveCurrentProfileConfig(); // Save to profile

floating-panel.css

@@ -100,13 +100,17 @@
 }
 
 #max-extension-queue-delay-input {
-    width: 50px;
+    min-width: 50px;
+    /* Set a minimum width so it doesn't get too small */
+    max-width: 100px;
+    /* Set a maximum width to prevent breaking the layout */
     background-color: rgba(80, 80, 80, 1);
     color: white;
     border: 1px solid #666;
     border-radius: 4px;
     padding: 2px 4px;
     font-size: 12px;
+    /* The fixed 'width' property is removed to allow dynamic sizing */
 }
 
 #max-extension-queue-section .action-buttons-container {
@@ -238,4 +242,22 @@
     font-size: 12px;
     cursor: pointer;
     min-width: 120px;
+}
+
+/* === ADDED TO RESTORE NUMBER INPUT SPINNERS === */
+/* This rule ensures the up/down arrows are visible on the queue delay input */
+#max-extension-queue-delay-input {
+    appearance: textfield;
+    -moz-appearance: textfield;
+    /* For Firefox */
+}
+
+#max-extension-queue-delay-input::-webkit-inner-spin-button,
+#max-extension-queue-delay-input::-webkit-outer-spin-button {
+    -webkit-appearance: auto;
+    /* For Chrome, Safari, Edge */
+    opacity: 1;
+    /* Make sure they are not transparent */
+    margin: 0;
+    /* Reset any custom margin */
 }

floating-panel.html

@@ -34,8 +34,9 @@
           <input
             id="max-extension-queue-delay-input"
             type="number"
-            min="2"
-            title="Delay in minutes between sending each queued prompt. Minimum 2 minutes."
+            min="1"
+            max="64000"
+            title="Delay in minutes between sending each queued prompt. Min: 1, Max: 64000."
           />
         </div>
         <div class="action-buttons-container">