[fix] simple: detect touch screen using media query

related to https://github.com/searxng/searxng/issues/928

searx/static/themes/simple/src/js/head/00_init.js

@@ -4,7 +4,6 @@
  * (C) Copyright Contributors to the searx project (2014 - 2021).
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-/* global DocumentTouch:readonly */
 (function (w, d) {
   'use strict';
 
@@ -16,7 +15,6 @@
 
   // try to detect touch screen
   w.searxng = {
-    touch: (("ontouchstart" in w) || w.DocumentTouch && document instanceof DocumentTouch) || false,
     method: script.getAttribute('data-method'),
     autocompleter: script.getAttribute('data-autocompleter') === 'true',
     search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',
@@ -34,7 +32,4 @@
   var hmtlElement = d.getElementsByTagName("html")[0];
   hmtlElement.classList.remove('no-js');
   hmtlElement.classList.add('js');
-  if (w.searxng.touch) {
-    hmtlElement.classList.add('touch');
-  }
 })(window, document);

searx/static/themes/simple/src/less/search.less

@@ -200,8 +200,9 @@
       margin-top: 2px;
     }
   }
+}
 
-  html.touch {
+@media screen and (max-width: @tablet) and (hover: none) {
   #main_index,
   #main_results {
     #categories_container {
@@ -222,7 +223,6 @@
     }
   }
 }
-}
 
 @media screen and (max-width: @phone) {
   #search_header {
@@ -262,8 +262,8 @@
   }
 
   .category {
-    display: block;
-    width: 100%;
+    display: inline-block;
+    width: auto;
     margin: 0;
 
     label {