fix: improve responsiveness of dashboard header

umap/static/umap/content.css

@@ -164,6 +164,7 @@ h2.tabs a:not(.selected) {
     font-weight: normal;
     color: #263B58;
     text-decoration: none;
+    margin-right: 0;
 }
 h2.tabs a:hover {
     text-decoration: underline;
@@ -375,10 +376,23 @@ ul.umap-autocomplete {
     align-items: flex-end;
     margin-bottom: 1rem;
 }
+@media all and (max-width: 640px) {
+    .table-header {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+    }
+}
 .table-header form {
     display: flex;
     align-items: flex-end;
 }
+@media all and (max-width: 640px) {
+    .table-header form {
+        flex-direction: column;
+        align-items: center;
+    }
+}
 .table-header form input {
     border: 2px solid #263B58;
     border-radius: 0;

umap/templates/umap/user_dashboard.html

@@ -18,11 +18,12 @@
       <div class="table-header">
         <form action="{{ request.get_full_path }}" method="get">
           <span>
-            <label for="q">{% blocktranslate %}Map’s title{% endblocktranslate %}</label>
+            <label class="sr-only" for="q">{% translate "Map’s title" %}</label>
             <input id="q" name="q" type="search"
+                   placeholder="{% translate 'Map’s title' %}"
                    value="{{ request.GET.q|default:"" }}" />
           </span>
-          <input type="submit" value="{% trans "Search" %}" />
+          <input type="submit" value="{% trans "Search my maps" %}" />
         </form>
         {% if maps.object_list|length > 1 %}
           <a href="{% url 'user_download' %}?{% spaceless %}