From 96acd710dc8898d0cf95390f4a4058bee04e8159 Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Fri, 9 Feb 2024 10:30:30 -0500
Subject: [PATCH] fix: improve responsiveness of dashboard header

---
 umap/static/umap/content.css            | 14 ++++++++++++++
 umap/templates/umap/user_dashboard.html |  5 +++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 862d58ae..31e0a112 100644
--- a/umap/static/umap/content.css
+++ b/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;
diff --git a/umap/templates/umap/user_dashboard.html b/umap/templates/umap/user_dashboard.html
index d225ff8e..3b828740 100644
--- a/umap/templates/umap/user_dashboard.html
+++ b/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 %}