Fix debouncing in searchbox

src/site/_includes/components/searchScript.njk

@@ -111,10 +111,11 @@
             }
         });
 
+        const debouncedSearch = debounce(search, 250, false);
         field = document.querySelector('#term');
         field.addEventListener('keydown', (e) => {
             if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
-                debounce(search, 500, false)();
+                debouncedSearch();
             }
         });
         resultsDiv = document.querySelector('#search-results');
@@ -144,12 +145,12 @@
             resultsDiv.innerHTML = resultsHTML;
             return;
         }
-        resultsHTML += '<ul>';
+        resultsHTML += '<div>';
         // we need to add title, url from ref
         results.forEach(r => {
-            resultsHTML += `<li class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></li>`;
+            resultsHTML += `<div class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></div>`;
         });
-        resultsHTML += '</ul>';
+        resultsHTML += '</div>';
         resultsDiv.innerHTML = resultsHTML;
     }
 </script>

src/site/styles/digital-garden-base.scss

@@ -292,11 +292,6 @@ ul.task-list {
     max-height: 50vh;
 }
 
-#search-results ul {
-    padding-inline-start: 0;
-    width: 100%;
-}
-
 #search-results .searchresult {
     margin-bottom: 15px;
     list-style: none;
@@ -306,10 +301,6 @@ ul.task-list {
     font-size: 1.2rem;
     cursor: pointer;
 
-    &:hover {
-        border: 2px solid var(--text-accent);
-    }
-
     &.active{
         border: 2px solid var(--text-accent);
     }
@@ -329,7 +320,7 @@ ul.task-list {
 .search-link {
     display: block;
     margin-bottom: 4px;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
 }
 
 .search-button {