Fix broken layout

searx/static/themes/etheme/css/etheme.css

@@ -754,17 +754,18 @@ input:checked + .slider:before {
 #search_form #categories {
   text-transform: capitalize;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   position: relative;
   flex: 100%;
+  gap: 16px;
+  height: 80%;
 }
 #search_form .search_categories label,
 #search_form #categories label {
   flex-basis: auto;
   font-size: 14px;
   font-weight: normal;
-  margin-right: 16px;
   cursor: pointer;
 }
 #search_form .search_categories input[type="checkbox"]:checked + label,
@@ -835,7 +836,6 @@ input:checked + .slider:before {
   }
   #search_form #search_params #time_and_lang {
     display: flex;
-    margin-left: 32px;
   }
   #search_form #search_params #time_and_lang > * {
     width: auto;
@@ -978,6 +978,7 @@ input:checked + .slider:before {
 .result .external-link {
   font-size: 14px;
   color: var(--color-success);
+  word-break: break-word;
 }
 .result .extra-info {
   color: var(--text-muted-normal-alpha);

searx/static/themes/etheme/less/etheme/results.less

@@ -113,6 +113,7 @@
   .external-link {
     font-size: @fontsize_small;
     color: var(--color-success);
+    word-break: break-word;
   }
 
   .extra-info {

searx/static/themes/etheme/less/etheme/search.less

@@ -115,7 +115,7 @@
     justify-content: space-between;
     font-size: @fontsize_small;
     padding-bottom: @spacing_large;
-    padding-top: @spacing_large;
+    padding-top: @spacing_x-large;
     padding-left: @spacing_x-large;
     padding-right: @spacing_x-large;
 
@@ -133,20 +133,20 @@
     
   }
 
-
   .search_categories, #categories {
     text-transform: capitalize;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     position: relative;
     flex: 100%;
+    gap: @spacing_large;
+    height: 80%;
   
     label {
       flex-basis: auto;
       font-size: @fontsize_small;
       font-weight: normal;
-      margin-right: @spacing_large;
       cursor: pointer;
     }
   
@@ -208,7 +208,6 @@
 
       #time_and_lang { 
         display: flex;
-        margin-left: @spacing_xx-large;
         > * { width: auto; }
       }
     }

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

-/*! searx | 21-10-2021 | https://github.com/searx/searx */
+/*! searx | 26-10-2021 | https://github.com/searx/searx */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *

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

-/*! searx | 21-10-2021 | https://github.com/searx/searx */
+/*! searx | 26-10-2021 | https://github.com/searx/searx */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *

searx/templates/etheme/components/categories.html

@@ -4,26 +4,34 @@
 {%- endmacro -%}
 
 {% set main_categories = ["general", "images", "videos", "news"] %}
-
-<div id="categories" {% if rtl %} class="rtl" {% endif %}>
-    {% for category in categories %}
-        {% if category in main_categories + selected_categories %}
-            {{ category_widget(category) }}
-        {% endif %}
-    {% endfor %}
-
-    <div id="more_categories_container">
-        <input type="checkbox" name="more_categories_toggle" id="more_categories_toggle" class="hidden">
-        <label for="more_categories_toggle" id="show_more_categories">{{_("More")}}</label>
-        <label for="more_categories_toggle" id="show_less_categories">{{_("Less")}}</label>
-        <span id="show_more_categories_" class="hidden">{{_("More")}}</span>
-        <span id="show_less_categories_" class="hidden">{{_("Less")}}</span>
-        <div id="more_categories">
-            {% for category in categories %}
-                {% if not (category in main_categories + ["map"] or category in selected_categories) %}
-                    {{ category_widget(category) }}
-                {% endif %}
-            {% endfor %}
+<div class="categories-wrap">
+    <div id="categories" {% if rtl %} class="rtl" {% endif %}>
+        {% for category in categories %}
+            {% if category in main_categories + selected_categories %}
+                {{ category_widget(category) }}
+            {% endif %}
+        {% endfor %}
+    
+        <div id="more_categories_container">
+            <input type="checkbox" name="more_categories_toggle" id="more_categories_toggle" class="hidden">
+            <label for="more_categories_toggle" id="show_more_categories">{{_("More")}}</label>
+            <label for="more_categories_toggle" id="show_less_categories">{{_("Less")}}</label>
+            <span id="show_more_categories_" class="hidden">{{_("More")}}</span>
+            <span id="show_less_categories_" class="hidden">{{_("Less")}}</span>
+            <div id="more_categories">
+                {% for category in categories %}
+                    {% if not (category in main_categories + ["map"] or category in selected_categories) %}
+                        {{ category_widget(category) }}
+                    {% endif %}
+                {% endfor %}
+            </div>
         </div>
+
+        <span id="time_and_lang">
+            {% set flat_lang_selector = True %}
+            {% include 'etheme/components/languages.html' %}
+            {% include 'etheme/components/time-range.html' %}
+        </span>
     </div>
-</div>
+    
+</div>
\ No newline at end of file

searx/templates/etheme/components/search_full.html

@@ -3,10 +3,5 @@
 {% call search_bar(q, true, rtl) %}
   <div id="search_params">
     {% include 'etheme/components/categories.html' %}
-    <span id="time_and_lang">
-      {% set flat_lang_selector = True %}
-      {% include 'etheme/components/languages.html' %}
-      {% include 'etheme/components/time-range.html' %}
-    </span>
   </div>
 {% endcall %}