From 32823ecb69b115a6726475d6421f0a1c0327fafa Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Mon, 17 Mar 2025 20:19:13 +0100
Subject: [refactor] search.js: use custom auto completion implementation

The previously used library is unmaintained for 6 years now [1] and the solution
had know issues [2][3]

[1] https://github.com/searxng/searxng/pull/4284#discussion_r1954493434
[2] https://github.com/searxng/searxng/pull/4318#issuecomment-2731576657
[3] https://github.com/privau/searxng/issues/56
---
 client/simple/src/less/autocomplete.less | 3 +--
 client/simple/src/less/definitions.less  | 3 ++-
 client/simple/src/less/search.less       | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'client/simple/src/less')

diff --git a/client/simple/src/less/autocomplete.less b/client/simple/src/less/autocomplete.less
index 8285ff2c6..93efb875e 100644
--- a/client/simple/src/less/autocomplete.less
+++ b/client/simple/src/less/autocomplete.less
@@ -3,6 +3,7 @@
 .autocomplete {
   position: absolute;
   width: @search-width;
+  max-width: calc(100% - 2 * @search-padding-horizontal);
   max-height: 0;
   overflow-y: hidden;
   .ltr-text-align-left();
@@ -65,8 +66,6 @@
 
 @media screen and (max-width: @phone) {
   .autocomplete {
-    width: 100%;
-
     > ul > li {
       padding: 1rem;
     }
diff --git a/client/simple/src/less/definitions.less b/client/simple/src/less/definitions.less
index 395a02cde..d2d14e35d 100644
--- a/client/simple/src/less/definitions.less
+++ b/client/simple/src/less/definitions.less
@@ -287,8 +287,9 @@
 @results-image-row-height: 12rem;
 @results-image-row-height-phone: 10rem;
 @search-width: 44rem;
-// heigh of #search, see detail.less
+// height of #search, see detail.less
 @search-height: 13rem;
+@search-padding-horizontal: 0.5rem;
 
 /// Device Size
 /// @desktop > @tablet
diff --git a/client/simple/src/less/search.less b/client/simple/src/less/search.less
index 460ea09fa..bc49ffadc 100644
--- a/client/simple/src/less/search.less
+++ b/client/simple/src/less/search.less
@@ -131,7 +131,7 @@ button.category_button {
 }
 
 #search_view {
-  padding: 0.5rem 0.3rem 0 0.5rem;
+  padding: 0.5rem @search-padding-horizontal 0 @search-padding-horizontal;
   grid-area: search;
 
   body.results_endpoint & {
@@ -141,7 +141,8 @@ button.category_button {
 
 .search_box {
   border-radius: 0.8rem;
-  width: @search-width;
+  width: 100%;
+  max-width: @search-width;
   display: inline-flex;
   flex-direction: row;
   white-space: nowrap;
@@ -291,8 +292,7 @@ html.no-js #clear_search.hide_if_nojs {
   }
 
   .search_box {
-    width: 98%;
-    display: flex;
+    width: 100%;
   }
 
   #q {
-- 
cgit v1.2.3