Better usage menu

views/partials/popover-models.html

@@ -6,7 +6,7 @@
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu3" role="menu">
-        <div class="dropdown-content is-small">
+        <div class="dropdown-content">
             <div class="dropdown-item" id="models-list">
                 {% for LLM in LLMs %}
                 <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
@@ -84,18 +84,11 @@
 </div>
 
 <script>
-    function toggleDropdown(event) {
-        event.stopPropagation();
-        document.getElementById('models-dropdown').classList.toggle('is-active');
-    }
-
-    function closeDropdown(event) {
+    document.addEventListener('click', function (event) {
         if (!document.getElementById('models-dropdown').contains(event.target)) {
             document.getElementById('models-dropdown').classList.remove('is-active');
         }
-    }
-
-    document.addEventListener('click', closeDropdown);
+    });
 
     document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
         const customEndpoint = this.value === 'custom';