diff --git a/popup/mzta-popup.css b/popup/mzta-popup.css index 820b76a0..ee31b6ca 100644 --- a/popup/mzta-popup.css +++ b/popup/mzta-popup.css @@ -11,11 +11,12 @@ body { width: fit-content; height: fit-content; display: flex; + flex-direction: column; justify-content: center; align-items: center; position: relative; width: 10em; - max-height: 12em; + max-height: 13em; min-height: 1em; padding: 0; } @@ -29,9 +30,13 @@ body { z-index: 1001; font-size: 13px; } + + ._spacer_div{ + width: 100%; + height: 2.1em; + } #mzta_autocomplete-items { - margin-top: 1.5em; border: none; z-index: 1000; background-color: #FAFAFA; diff --git a/popup/mzta-popup.html b/popup/mzta-popup.html index 2563afd2..061214a8 100644 --- a/popup/mzta-popup.html +++ b/popup/mzta-popup.html @@ -9,6 +9,7 @@
+
 
diff --git a/popup/mzta-popup.js b/popup/mzta-popup.js index bd26dc24..ace65e57 100644 --- a/popup/mzta-popup.js +++ b/popup/mzta-popup.js @@ -36,6 +36,7 @@ async function searchPrompt(allPrompts, tabId, tabType){ let input = document.getElementById('mzta_search_input'); let autocompleteList = document.getElementById('mzta_autocomplete-items'); + let _spacer_div = document.getElementById('_spacer_div'); let banner = document.getElementById('mzta_search_banner'); // Initialize variables to track focus and selection @@ -66,6 +67,7 @@ async function searchPrompt(allPrompts, tabId, tabType){ if (filteredData.length === 0) { autocompleteList.style.display = 'none'; + _spacer_div.style.display = 'none'; return; } @@ -95,12 +97,14 @@ async function searchPrompt(allPrompts, tabId, tabType){ selectedId = item.id; // Store the selected item's ID console.log('>>>>>>>>>>>>> mousedown selectedId:', selectedId); autocompleteList.style.display = 'none'; + _spacer_div.style.display = 'none'; }); autocompleteList.appendChild(itemDiv); }); autocompleteList.style.display = 'block'; + _spacer_div.style.display = 'block'; }); // Add a keydown event listener to handle arrow navigation and selection