chore: simplify search form CSS and HTML

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/content.css

@@ -19,6 +19,18 @@ input:-moz-placeholder, :-moz-placeholder {
 .search-form {
     display: flex;
     align-items: baseline;
+    gap: calc(var(--gutter) / 2);
+    max-width: 800px;
+    margin: 0 auto;
+}
+.search-form select {
+    max-width: 200px;
+}
+.search-form input[type=submit] {
+    min-width: 200px;
+}
+.flex-break {
+    justify-content: center;
 }
 
 
@@ -555,4 +567,9 @@ dialog::backdrop {
     .mhide {
         display: none;
     }
+    .flex-break {
+        flex-direction: column;
+        align-items: center;
+    }
+
 }

umap/templates/umap/search_bar.html

@@ -4,25 +4,19 @@
 {% trans "Search maps" as default_placeholder %}
 <div class="wrapper search_wrapper">
   <div class="row">
-    <form class="search-form" action="{% firstof action search_url %}" method="get">
+    <form class="search-form flex-break" action="{% firstof action search_url %}" method="get">
-      <div class="col half mwide">
       <input name="q"
              type="search"
              placeholder="{% firstof placeholder default_placeholder %}"
              aria-label="{% firstof placeholder default_placeholder %}"
              value="{{ request.GET.q|default:"" }}" />
-      </div>
-      <div class="col quarter mwide">
       <select name="tags">
         <option value="">{% trans "Any category" %}</option>
         {% for value, label in UMAP_TAGS %}
         <option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
         {% endfor %}
       </select>
-      </div>
-      <div class="col quarter mwide">
       <input type="submit" value="{% trans "Search" %}" class="neutral" />
-      </div>
     </form>
   </div>
 </div>