auto-overflow for qualification list

ephios-dev · Aug 28, 2023 · ad66f59 · ad66f59
1 parent 24d3661
commit ad66f59
Showing 1 changed file with 42 additions and 41 deletions.
diff --git a/ephios/plugins/qualification_management/templates/core/qualification_list.html b/ephios/plugins/qualification_management/templates/core/qualification_list.html
@@ -21,47 +21,48 @@
     </div>
 
     <h3 class="mt-3">{% translate "All qualifications" %}</h3>
-
-    <table class="table table-striped display mt-2">
-        <thead>
-        <tr>
-            <th>{% translate "Title" %}</th>
-            <th>{% translate "Abbreviation" %}</th>
-            <th>{% translate "Category" %}</th>
-            <th>{% translate "Includes" %}</th>
-            <th>{% translate "Action" %}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for qualification in qualification_list %}
+    <div class="overflow-x-auto">
+        <table class="table table-striped display mt-2">
+            <thead>
             <tr>
-                <td class="break-word">
-                    {{ qualification }}
-                    {% if not qualification.is_imported %}
-                        <span class="badge bg-warning float-end">{% translate "custom" %}</span>
-                    {% endif %}
-                </td>
-                <td class="break-word">{{ qualification.abbreviation }}</td>
-                <td class="break-word">{{ qualification.category.title }}</td>
-                <td class="break-word">
-                    {% for included in qualification.includes.all %}
-                        {{ included }}{% if not forloop.last %}, {% endif %}
-                    {% endfor %}
-                </td>
-                <td class="">
-                    <div class="d-flex">
-                        <a class="btn btn-secondary btn-sm text-nowrap"
-                           href="{% url "qualification_management:settings_qualification_edit" qualification.pk %}"><span
-                                class="fa fa-edit"></span> <span
-                                class="d-none d-md-inline">{% trans "Edit" %}</span></a>
-                        <a class="btn btn-secondary btn-sm text-nowrap ms-1"
-                           href="{% url "qualification_management:settings_qualification_delete" qualification.pk %}"><span
-                                class="fa fa-trash"></span> <span class="d-none d-md-inline">{% trans "Delete" %}</span></a>
-
-                    </div>
-                </td>
+                <th>{% translate "Title" %}</th>
+                <th>{% translate "Abbreviation" %}</th>
+                <th>{% translate "Category" %}</th>
+                <th>{% translate "Includes" %}</th>
+                <th>{% translate "Action" %}</th>
             </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+            {% for qualification in qualification_list %}
+                <tr>
+                    <td class="break-word">
+                        {{ qualification }}
+                        {% if not qualification.is_imported %}
+                            <span class="badge bg-warning float-end">{% translate "custom" %}</span>
+                        {% endif %}
+                    </td>
+                    <td class="break-word">{{ qualification.abbreviation }}</td>
+                    <td class="break-word">{{ qualification.category.title }}</td>
+                    <td class="break-word">
+                        {% for included in qualification.includes.all %}
+                            {{ included }}{% if not forloop.last %}, {% endif %}
+                        {% endfor %}
+                    </td>
+                    <td class="">
+                        <div class="d-flex">
+                            <a class="btn btn-secondary btn-sm text-nowrap"
+                               href="{% url "qualification_management:settings_qualification_edit" qualification.pk %}"><span
+                                    class="fa fa-edit"></span> <span
+                                    class="d-none d-md-inline">{% trans "Edit" %}</span></a>
+                            <a class="btn btn-secondary btn-sm text-nowrap ms-1"
+                               href="{% url "qualification_management:settings_qualification_delete" qualification.pk %}"><span
+                                    class="fa fa-trash"></span> <span
+                                    class="d-none d-md-inline">{% trans "Delete" %}</span></a>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
 {% endblock %}