From 88482c34a12138fea625809a1bcb01948a1b89b5 Mon Sep 17 00:00:00 2001
From: Grant Lanham <contact@grantlanham.com>
Date: Tue, 9 Jul 2024 21:09:08 -0400
Subject: [PATCH] [mod] UX: flush flag icon to right in language select option
 values

If the flag icon is first, it prevents easily searching the select list on the
keyboard.  By moving the icon fully to the right, this will enable a user to
search the select list.

Closes: https://github.com/searxng/searxng/issues/3645
---
 searx/templates/simple/filters/languages.html | 27 ++++++++++++-------
 .../simple/preferences/language.html          |  4 +--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/searx/templates/simple/filters/languages.html b/searx/templates/simple/filters/languages.html
index a42a304a5..c4185b63c 100644
--- a/searx/templates/simple/filters/languages.html
+++ b/searx/templates/simple/filters/languages.html
@@ -1,12 +1,19 @@
 <select class="language" id="language" name="language" aria-label="{{ _('Search language') }}">{{- '' -}}
-	<option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }} [all]</option>
-	<option value="auto" {% if current_language == 'auto' %}selected="selected"{% endif %}>
-		{{- _('Auto-detect') -}}
-		{%- if current_language == 'auto' %} ({{ search_language }}){%- endif -%}
-	</option>
-	{%- for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
-	<option value="{{ sxng_tag }}" {% if sxng_tag == current_language %}selected="selected"{% endif %}>
-		{% if flag %}{{ flag }} {% endif%} {{- lang_name }} {% if country_name %} - {{ country_name }} {% endif %} [{{sxng_tag}}]
-	</option>
-	{%- endfor -%}
+  <option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }} [all]</option>{{- '' -}}
+  <option value="all"
+          {%- if current_language == 'all' %} selected="selected" {%- endif -%}>
+          {{- _('Default language') }} [all] {{- '' -}}
+  </option>{{- '' -}}
+  <option value="auto"
+          {%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
+          {{- _('Auto-detect') }} [auto] {{- '' -}}
+  </option>{{- '' -}}
+  {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
+    <option value="{{ sxng_tag }}"
+            {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
+            {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
+            {{- ' ' -}}[{{sxng_tag}}]{{- ' ' -}}
+            {%- if flag -%}{{ flag }}{%- endif -%}
+    </option>
+  {%- endfor -%}
 </select>
diff --git a/searx/templates/simple/preferences/language.html b/searx/templates/simple/preferences/language.html
index 809c516df..534839d3d 100644
--- a/searx/templates/simple/preferences/language.html
+++ b/searx/templates/simple/preferences/language.html
@@ -13,9 +13,9 @@
       {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
         <option value="{{ sxng_tag }}"
                 {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
-                {%- if flag -%}{{ flag }} {% endif -%}
                 {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
-                {{- ' ' -}}[{{sxng_tag}}]{{- '' -}}
+                {{- ' ' -}}[{{sxng_tag}}]{{- ' ' -}}
+                {%- if flag -%}{{ flag }}{%- endif -%}
         </option>
       {%- endfor -%}
     </select>{{- '' -}}