fix settings pop up not dismissing, center model dropdown menu in header, fix hover over user icon - Follow Up Deployment

index.html

@@ -61,7 +61,7 @@
         </div>
         
         <div class="flex items-center space-x-3">
-            <div class="relative">
+            <div class="relative flex justify-center">
                 <select id="modelSelect" class="bg-white dark:bg-dark-700 border border-gray-300 dark:border-dark-600 rounded-lg py-2 pl-3 pr-8 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500">
                     <!-- Options will be populated by JavaScript -->
                 </select>
@@ -349,7 +349,7 @@
             elements.authBtn.addEventListener('mouseleave', (e) => {
                 // Delay hiding to allow moving to the card
                 setTimeout(() => {
-                    if (!elements.userCard.matches(':hover')) {
+                    if (!elements.userCard.matches(':hover') && !elements.authBtn.matches(':hover')) {
                         elements.userCard.classList.add('hidden');
                     }
                 }, 100);
@@ -381,6 +381,13 @@
                 }
             });
             
+            // Close settings when pressing Escape key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && !elements.settingsModal.classList.contains('hidden')) {
+                    elements.settingsModal.classList.add('hidden');
+                }
+            });
+            
             // Save settings
             elements.saveSettings.addEventListener('click', () => {
                 saveSettings();