From b1b81a04edc30d104bb713ad27abb44b236c28ef Mon Sep 17 00:00:00 2001
From: ducoterra <git@ducoterra.net>
Date: Tue, 5 May 2026 09:57:26 -0400
Subject: [PATCH] search results box is the right size now

---
 css/style.css |  9 +++------
 lib/search.js | 37 +++++++++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3361e7c..9a16e4a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1645,19 +1645,16 @@ footer {
 }
 
 .search-results-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 0.3rem;
+  position: fixed;
   background: var(--white);
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 4px 10px rgba(255,20,147,0.15);
   border: 2px solid var(--pink-200);
-  z-index: 10000;
+  z-index: 9999;
   display: none;
   max-height: 400px;
   overflow-y: auto;
+  margin-top: 0.3rem;
 }
 
 .search-result-item {
diff --git a/lib/search.js b/lib/search.js
index 6fcddf6..b59eab4 100644
--- a/lib/search.js
+++ b/lib/search.js
@@ -60,12 +60,6 @@ var Search = (function() {
     // Insert after brand
     brand.parentNode.insertBefore(searchWrapper, brand.nextSibling);
 
-    // Move results container inside search wrapper for correct absolute positioning
-    var existingContainer = document.getElementById('searchResultsContainer');
-    if (existingContainer) {
-      searchWrapper.appendChild(existingContainer);
-    }
-
     currentInput = searchInput;
 
     // Event listeners
@@ -118,6 +112,25 @@ var Search = (function() {
         hideDropdown();
       }
     });
+
+    // Reposition on scroll and resize
+    function positionDropdown() {
+      var container = document.getElementById('searchResultsContainer');
+      if (!container || !dropdownVisible) return;
+      var rect = currentInput.getBoundingClientRect();
+      var vw = window.innerWidth;
+      container.style.top = (rect.bottom + 5) + 'px';
+      if (vw <= 900) {
+        container.style.left = '0';
+        container.style.width = '100vw';
+      } else {
+        container.style.left = rect.left + 'px';
+        container.style.width = '520px';
+      }
+    }
+
+    window.addEventListener('scroll', positionDropdown);
+    window.addEventListener('resize', positionDropdown);
   }
 
   function crawlPage(url, callback) {
@@ -453,6 +466,18 @@ var Search = (function() {
   function showDropdown() {
     var container = document.getElementById('searchResultsContainer');
     if (container) {
+      var rect = currentInput.getBoundingClientRect();
+      var vw = window.innerWidth;
+      var sidebarWidth = 240;
+
+      if (vw <= 900) {
+        container.style.left = '0';
+        container.style.width = '100vw';
+      } else {
+        container.style.left = rect.left + 'px';
+        container.style.width = '520px';
+      }
+      container.style.top = (rect.bottom + 5) + 'px';
       container.style.display = 'block';
       dropdownVisible = true;
     }