fix: responsive titles in changelist tables (#333)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -10,7 +10,7 @@
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="flex-grow">
+        <div id="main" class="flex-grow min-w-0">
             {% include "unfold/helpers/header.html" %}
 
             {% if not is_popup %}

src/unfold/templates/admin/base.html

@@ -67,7 +67,7 @@
         {% endif %}
 
         <div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
-            <div class="changelist-form-container flex-grow px-4" x-data="{ filterOpen: false }">
+            <div class="changelist-form-container flex-grow min-w-0 px-4" x-data="{ filterOpen: false }">
                 {% block date_hierarchy %}
                     {% if cl.date_hierarchy %}
                         {% date_hierarchy cl %}

src/unfold/templates/admin/change_list.html

@@ -7,7 +7,7 @@
 {% endif %}
 
 {% if results %}
-    <table id="result_list" class="border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+    <table id="result_list" class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:table lg:dark:border-gray-800">
         <thead class="hidden lg:table-header-group">
             <tr>
                 {% for header in result_headers %}
@@ -52,7 +52,7 @@
             </tr>
         </thead>
 
-        <tbody>
+        <tbody class="block lg:table-row-group">
             {% for result in results %}
                 {% if result.form and result.form.non_field_errors %}
                     <tr>

src/unfold/templates/admin/change_list_results.html

@@ -36,7 +36,61 @@
 
 register = Library()
 
-LINK_CLASSES = ["text-gray-700 dark:text-gray-200"]
+LINK_CLASSES = [
+    "text-gray-700",
+    "truncate",
+    "dark:text-gray-200",
+]
+
+ROW_CLASSES = [
+    "align-middle",
+    "flex",
+    "border-t",
+    "border-gray-200",
+    "font-normal",
+    "gap-4",
+    "min-w-0",
+    "overflow-hidden",
+    "px-3",
+    "py-2",
+    "text-left",
+    "text-sm",
+    "before:flex",
+    "before:capitalize",
+    "before:content-[attr(data-label)]",
+    "before:items-center",
+    "before:mr-auto",
+    "before:text-gray-500",
+    "first:border-t-0",
+    "dark:before:text-gray-400",
+    "lg:before:hidden",
+    "lg:first:border-t",
+    "lg:py-3",
+    "lg:table-cell",
+    "dark:border-gray-800",
+]
+
+CHECKBOX_CLASSES = [
+    "action-checkbox",
+    "align-middle",
+    "flex",
+    "items-center",
+    "px-3",
+    "py-2",
+    "text-left",
+    "text-sm",
+    "before:block",
+    "before:capitalize",
+    "before:content-[attr(data-label)]",
+    "before:mr-auto",
+    "before:text-gray-500",
+    "lg:before:hidden",
+    "lg:border-t",
+    "lg:border-gray-200",
+    "lg:table-cell",
+    "dark:before:text-gray-400",
+    "dark:lg:border-gray-800",
+]
 
 
 def result_headers(cl):
@@ -158,28 +212,7 @@ def link_in_col(is_first: bool, field_name: str, cl: ChangeList) -> bool:
         empty_value_display = cl.model_admin.get_empty_value_display()
         row_classes = [
             "field-%s" % _coerce_field_name(field_name, field_index),
-            "align-middle",
-            "flex",
-            "border-t",
-            "border-gray-200",
-            "font-normal",
-            "px-3",
-            "py-2",
-            "text-left",
-            "text-sm",
-            "before:flex",
-            "before:capitalize",
-            "before:content-[attr(data-label)]",
-            "before:items-center",
-            "before:mr-auto",
-            "before:text-gray-500",
-            "first:border-t-0",
-            "dark:before:text-gray-400",
-            "lg:before:hidden",
-            "lg:first:border-t",
-            "lg:py-3",
-            "lg:table-cell",
-            "dark:border-gray-800",
+            *ROW_CLASSES,
         ]
 
         try:
@@ -192,27 +225,7 @@ def link_in_col(is_first: bool, field_name: str, cl: ChangeList) -> bool:
             )
             if f is None or f.auto_created:
                 if field_name == "action_checkbox":
-                    row_classes = [
-                        "action-checkbox",
-                        "align-middle",
-                        "flex",
-                        "items-center",
-                        "px-3",
-                        "py-2",
-                        "text-left",
-                        "text-sm",
-                        "before:block",
-                        "before:capitalize",
-                        "before:content-[attr(data-label)]",
-                        "before:mr-auto",
-                        "before:text-gray-500",
-                        "lg:before:hidden",
-                        "lg:border-t",
-                        "lg:border-gray-200",
-                        "lg:table-cell",
-                        "dark:before:text-gray-400",
-                        "dark:lg:border-gray-800",
-                    ]
+                    row_classes = CHECKBOX_CLASSES
                 boolean = getattr(attr, "boolean", False)
                 label = getattr(attr, "label", False)
                 header = getattr(attr, "header", False)