fix: responsive sections (#1134)

Author: lukasvinclav

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

@@ -81,9 +81,11 @@
 
                     <tr class="{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %} block border mb-3 rounded shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
                         {% if cl.model_admin.list_sections|length > 0 %}
-                            <td class="align-middle border-t border-base-200 cursor-pointer pl-3 relative select-none text-center dark:border-base-800 w-0" x-on:click="rowOpen = !rowOpen">
-                                <div class="absolute bg-primary-600 -bottom-px left-0 top-0 w-0.5 z-10" x-show="rowOpen"></div>
-                                <span class="material-symbols-outlined !block -rotate-90 transition-all" x-bind:class="rowOpen && 'rotate-0'">
+                            <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
+                                data-label="{% trans "Expand row" %}"
+                                x-on:click="rowOpen = !rowOpen">
+                                <div class="absolute bg-primary-600 -bottom-px hidden left-0 top-0 w-0.5 z-10 lg:block" x-show="rowOpen"></div>
+                                <span class="material-symbols-outlined select-none !block -rotate-90 transition-all" x-bind:class="rowOpen && 'rotate-0'">
                                     expand_more
                                 </span>
                             </td>
@@ -97,9 +99,9 @@
                     </tr>
 
                     {% if cl.model_admin.list_sections|length > 0 %}
-                        <tr x-show="rowOpen">
-                            <td colspan="{{ result|length|add:1 }}" class="bg-base-200/10 border-t border-base-200 relative shadow-inner p-3 dark:border-base-800">
-                                <div class="absolute bg-primary-600 h-full left-0 top-0 w-0.5"></div>
+                        <tr class="block mb-3 lg:table-row" x-show="rowOpen">
+                            <td colspan="{{ result|length|add:1 }}" class="border bg-base-200/10 block border-base-200 relative rounded p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
+                                <div class="absolute bg-primary-600 h-full hidden left-0 top-0 w-0.5 lg:block"></div>
 
                                 <div class="grid gap-3 {{ cl.model_admin.list_sections_classes }}">
                                     {% for section in cl.model_admin.list_sections %}

src/unfold/templates/admin/change_list_results.html

@@ -8,7 +8,7 @@ <h3 class="font-semibold mb-1 text-font-important-light text-sm dark:text-font-i
     {% endif %}
 
     <div class="{% if card_included == 1 %}-m-6{% else %} bg-white flex flex-col grow lg:border lg:border-base-200 lg:overflow-hidden lg:rounded lg:shadow-sm{% endif %} lg:dark:border-base-800 dark:bg-base-900">
-        <div {% if height %} class="min-h-[37px]" style="max-height: {{ height }}px;" data-simplebar{% endif %}>
+        <div {% if height %}style="max-height: {{ height }}px;" data-simplebar{% endif %}>
             <table class="block border-spacing-none border-separate w-full lg:table">
                 {% if table.headers %}
                     <thead class="text-base-900 dark:text-base-100 {% if height %}sticky top-0{% endif %}">
@@ -27,7 +27,7 @@ <h3 class="font-semibold mb-1 text-font-important-light text-sm dark:text-font-i
                         {% for row in table.rows %}
                             <tr class="{% if striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} block group {% if forloop.first %}first-row{% endif %} {% if not card_included == 1 %}border mb-3 rounded shadow-sm{% else %}border-b{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
                                 {% for cell in row %}
-                                    <td class="px-3 py-2 align-middle flex border-t group-[.first-row]:border-t-0 border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
+                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
                                         {{ cell }}
                                     </td>
                                 {% endfor %}
@@ -39,7 +39,7 @@ <h3 class="font-semibold mb-1 text-font-important-light text-sm dark:text-font-i
         </div>
 
         {% if not table.rows %}
-            <p class="bg-white flex grow items-center justify-center py-2 dark:bg-base-900">
+            <p class="bg-white border border-base-200 flex grow items-center justify-center py-2 rounded shadow-sm dark:bg-base-900 lg:border-0 lg:rounded-none lg:shadow-none">
                 {% trans "No data" %}
             </p>
         {% endif %}