diff --git a/admin-dashboard.html b/admin-dashboard.html index a247b3b..aabe6a0 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -229,10 +229,12 @@ display: flex; flex-direction: column; pointer-events: auto; + position: relative; } #iconListContainer { overflow-y: auto; + max-height: calc(100vh - 200px); /* Adjust based on header height */ } #iconPickerHeader { @@ -2449,8 +2451,13 @@ function initIconPicker() { document.body.style.overflow = isModalOpen ? 'hidden' : ''; iconPickerModal.style.display = isModalOpen ? 'block' : 'none'; - if (isModalOpen && iconSearch) { - setTimeout(() => iconSearch.focus(), 50); + if (isModalOpen) { + // Focus search input only after modal is visible + requestAnimationFrame(() => { + if (iconSearch) { + iconSearch.focus(); + } + }); } }; @@ -2493,7 +2500,11 @@ function initIconPicker() { // Handle search if (iconSearch) { iconSearch.addEventListener('input', () => { - renderIcons(iconSearch.value.toLowerCase()); + // Debounce search to prevent excessive re-renders + clearTimeout(iconSearch.dataset.searchTimeout); + iconSearch.dataset.searchTimeout = setTimeout(() => { + renderIcons(iconSearch.value.toLowerCase()); + }, 200); }); }