Merge pull request #491 from MrPaulBlack/fix-mobile-result-scaling

[fix] mobile result scaling in simple theme

searx/static/themes/simple/css/searxng-rtl.css

@@ -2513,7 +2513,7 @@ article.result-images .detail {
     flex-direction: row;
   }
   #q {
-    width: auto !important;
+    width: 100%;
     flex: 1;
   }
   #main_results #q:placeholder-shown ~ #send_search {
@@ -2536,6 +2536,14 @@ article.result-images .detail {
     padding: 10px !important;
   }
 }
+@media screen and (max-width: 20rem) {
+  #search {
+    grid-template-areas: "search search" "categories categories";
+  }
+  #search_logo {
+    display: none;
+  }
+}
 #categories {
   margin: 0 10px 0 0;
   -webkit-touch-callout: none;

searx/static/themes/simple/css/searxng.css

@@ -2513,7 +2513,7 @@ article.result-images .detail {
     flex-direction: row;
   }
   #q {
-    width: auto !important;
+    width: 100%;
     flex: 1;
   }
   #main_results #q:placeholder-shown ~ #send_search {
@@ -2536,6 +2536,14 @@ article.result-images .detail {
     padding: 10px !important;
   }
 }
+@media screen and (max-width: 20rem) {
+  #search {
+    grid-template-areas: "search search" "categories categories";
+  }
+  #search_logo {
+    display: none;
+  }
+}
 #categories {
   margin: 0 10px 0 0;
   -webkit-touch-callout: none;

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);

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;

searx/templates/simple/base.html

@@ -7,7 +7,7 @@
   <meta name="generator" content="searxng/{{ searx_version }}">
   <meta name="referrer" content="no-referrer">
   <meta name="robots" content="noarchive">
-  <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="HandheldFriendly" content="True">
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
   <title>{% block title %}{% endblock %}{{ instance_name }}</title>