[fix] scaling of result page on small screens by @ZetaTom

* thanks to https://github.com/ZetaTom for the fix!
* set the width of the input#q element to 100% of the 1fr space of the grid layout
* change the viewport meta tag to th recommended value (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics)
* add a new @ultra-small-phone width of 20rem; when a device is smaller than that the search logo does not get displayed on the result page anymore

2 files changed, 14 insertions, 1 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 33b65a682..157cfeed1 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -220,6 +220,7 @@
 @tablet: 80em;
 @phone: 50em;
 @small-phone: 35em;
+@ultra-small-phone: 20rem;
 
 /// From style.less
 @stacked-bar-chart: rgb(0, 0, 0);
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 794958594..fddd2b357 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -191,7 +191,7 @@
   }
 
   #q {
-    width: auto !important;
+    width: 100%;
     flex: 1;
   }
 
@@ -220,6 +220,18 @@
   }
 }
 
+@media screen and (max-width: @ultra-small-phone) {
+  #search {
+    grid-template-areas:
+      "search search"
+      "categories categories";
+  }
+
+  #search_logo {
+    display: none;
+  }
+}
+
 #categories {
   margin: 0 10px 0 0;
   .disable-user-select;