From 5827a4cab0ccbd07660577b335ede6560825ca60 Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Fri, 9 Feb 2024 10:14:44 -0500
Subject: [PATCH] fix: make dashboard table scrollable

---
 umap/static/umap/content.css       |  37 ++++---
 umap/templates/umap/map_table.html | 162 +++++++++++++++--------------
 2 files changed, 104 insertions(+), 95 deletions(-)

diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 7b72ecd3..6ba29652 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -401,32 +401,39 @@ ul.umap-autocomplete {
     line-height: inherit;
     height: 2.5rem;
 }
-
-table.maps {
+.table-wrapper {
+    overflow-x: scroll;
+}
+.table-wrapper table {
     width: 100%;
+    min-width: 600px;
     border-collapse: collapse;
 }
-table.maps .map_fragment {
+.table-wrapper table .map_fragment {
     display: block;
     height: 80vh;
     width: 100%;
 }
-table.maps a,
-table.maps thead {
+.table-wrapper table a,
+.table-wrapper table thead {
     color: #263B58;
 }
-table.maps a:not(.icon-link) {
+.table-wrapper table thead th:last-of-type {
+    min-width: 240px;
+}
+
+.table-wrapper table a:not(.icon-link) {
     text-decoration: underline;
 }
-table.maps button.map-icon {
+.table-wrapper table button.map-icon {
     padding: 0;
     border: none;
     background: transparent;
 }
-table.maps form {
+.table-wrapper table form {
     display: inline;
 }
-table.maps input[type="submit"] {
+.table-wrapper table input[type="submit"] {
     display: inline;
     background-color: transparent;
     color: #263B58;
@@ -436,22 +443,22 @@ table.maps input[type="submit"] {
     margin: 0;
     line-height: inherit;
 }
-table.maps tbody tr {
+.table-wrapper table tbody tr {
     border-bottom: 1px solid #BDC7D4;
 }
-table.maps tbody tr td {
+.table-wrapper table tbody tr td {
     padding: 5px 4px;
 }
-table.maps tbody tr:nth-child(odd) {
+.table-wrapper table tbody tr:nth-child(odd) {
     background-color: #f4f4f4;
 }
-table.maps td {
+.table-wrapper table td {
     text-align: center;
 }
-table.maps thead tr {
+.table-wrapper table thead tr {
     line-height: 2em;
 }
-table.maps .button {
+.table-wrapper table .button {
     margin-bottom: 2px;
     padding:4px 6px;
     height: 36px;
diff --git a/umap/templates/umap/map_table.html b/umap/templates/umap/map_table.html
index b1aff48e..4134cda8 100644
--- a/umap/templates/umap/map_table.html
+++ b/umap/templates/umap/map_table.html
@@ -1,85 +1,87 @@
 {% load umap_tags i18n %}
-<table class="maps">
-  <thead>
-    <tr>
-      <th>{% blocktrans %}Name{% endblocktrans %}</th>
-      <th>{% blocktrans %}Preview{% endblocktrans %}</th>
-      <th>{% blocktrans %}Who can see{% endblocktrans %}</th>
-      <th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
-      <th>{% blocktrans %}Last save{% endblocktrans %}</th>
-      <th>{% blocktrans %}Owner{% endblocktrans %}</th>
-      <th>{% blocktrans %}Actions{% endblocktrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for map_inst in maps %}
-      {% with unique_id="map_"|addstr:map_inst.pk %}
-        <tr>
-          <td>
-            <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
-          </td>
-          <td>
-            {{ map_inst.preview_settings|json_script:unique_id }}
-            <button class="map-icon map-opener" data-map-id="{{ unique_id }}"
-              title="{% translate "Open preview" %}">
-              <span class="icon-dashboard icon-view"></span>
-              <span class="sr-only">{% translate "Open preview" %}</span>
-            </button>
-            <dialog>
-              <form method="dialog">
-                <div id="{{ unique_id }}_target" class="map_fragment"></div>
-                <p class="close-dialog">
-                  <button class="button" type="submit">Close</button>
-                </p>
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>{% blocktrans %}Name{% endblocktrans %}</th>
+        <th>{% blocktrans %}Preview{% endblocktrans %}</th>
+        <th>{% blocktrans %}Who can see{% endblocktrans %}</th>
+        <th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
+        <th>{% blocktrans %}Last save{% endblocktrans %}</th>
+        <th>{% blocktrans %}Owner{% endblocktrans %}</th>
+        <th>{% blocktrans %}Actions{% endblocktrans %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for map_inst in maps %}
+        {% with unique_id="map_"|addstr:map_inst.pk %}
+          <tr>
+            <td>
+              <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
+            </td>
+            <td>
+              {{ map_inst.preview_settings|json_script:unique_id }}
+              <button class="map-icon map-opener" data-map-id="{{ unique_id }}"
+                title="{% translate "Open preview" %}">
+                <span class="icon-dashboard icon-view"></span>
+                <span class="sr-only">{% translate "Open preview" %}</span>
+              </button>
+              <dialog>
+                <form method="dialog">
+                  <div id="{{ unique_id }}_target" class="map_fragment"></div>
+                  <p class="close-dialog">
+                    <button class="button" type="submit">Close</button>
+                  </p>
+                </form>
+              </dialog>
+            </td>
+            <td>{{ map_inst.get_share_status_display }}</td>
+            <td>{{ map_inst.get_edit_status_display }}</td>
+            <td>{{ map_inst.modified_at }}</td>
+            <td>
+              <a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
+            </td>
+            <td>
+              <a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
+                title="{% translate "Share" %}">
+                <span class="icon-dashboard icon-share"></span>
+                <span class="sr-only">{% translate "Share" %}</span>
+              </a>
+              <a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
+                title="{% translate "Edit" %}">
+                <span class="icon-dashboard icon-edit"></span>
+                <span class="sr-only">{% translate "Edit" %}</span>
+              </a>
+              <a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
+                title="{% translate "Download" %}">
+                <span class="icon-dashboard icon-download"></span>
+                <span class="sr-only">{% translate "Download" %}</span>
+              </a>
+              <form action="{% url 'map_clone' map_inst.pk %}" method="post">
+                {% csrf_token %}
+                <button class="map-icon" type="submit"
+                  title="{% translate "Clone" %}">
+                  <span class="icon-dashboard icon-duplicate"></span>
+                  <span class="sr-only">{% translate "Clone" %}</span>
+                </button>
               </form>
-            </dialog>
-          </td>
-          <td>{{ map_inst.get_share_status_display }}</td>
-          <td>{{ map_inst.get_edit_status_display }}</td>
-          <td>{{ map_inst.modified_at }}</td>
-          <td>
-            <a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
-          </td>
-          <td>
-            <a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
-              title="{% translate "Share" %}">
-              <span class="icon-dashboard icon-share"></span>
-              <span class="sr-only">{% translate "Share" %}</span>
-            </a>
-            <a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
-              title="{% translate "Edit" %}">
-              <span class="icon-dashboard icon-edit"></span>
-              <span class="sr-only">{% translate "Edit" %}</span>
-            </a>
-            <a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
-              title="{% translate "Download" %}">
-              <span class="icon-dashboard icon-download"></span>
-              <span class="sr-only">{% translate "Download" %}</span>
-            </a>
-            <form action="{% url 'map_clone' map_inst.pk %}" method="post">
-              {% csrf_token %}
-              <button class="map-icon" type="submit"
-                title="{% translate "Clone" %}">
-                <span class="icon-dashboard icon-duplicate"></span>
-                <span class="sr-only">{% translate "Clone" %}</span>
-              </button>
-            </form>
-            <form action="{% url 'map_delete' map_inst.pk %}"
-              method="post" class="map-delete">
-              {% csrf_token %}
-              <input type="hidden" name="next" value="{% url 'user_dashboard' %}">
-              <button class="map-icon" type="submit"
-                title="{% translate "Delete" %}">
-                <span class="icon-dashboard icon-delete"></span>
-                <span class="sr-only">{% translate "Delete" %}</span>
-              </button>
-            </form>
-          </td>
-        </tr>
-      {% endwith %}
-    {% endfor %}
-  </tbody>
-</table>
+              <form action="{% url 'map_delete' map_inst.pk %}"
+                method="post" class="map-delete">
+                {% csrf_token %}
+                <input type="hidden" name="next" value="{% url 'user_dashboard' %}">
+                <button class="map-icon" type="submit"
+                  title="{% translate "Delete" %}">
+                  <span class="icon-dashboard icon-delete"></span>
+                  <span class="sr-only">{% translate "Delete" %}</span>
+                </button>
+              </form>
+            </td>
+          </tr>
+        {% endwith %}
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 {% if maps.has_other_pages %}
   <div class="pagination">
     {% if maps.has_previous %}