fix: various responsive details

src/unfold/forms.py

@@ -44,10 +44,12 @@ class ActionForm(forms.Form):
                         "appearance-none",
                         "bg-white/20",
                         "font-medium",
-                        "min-w-72",
-                        "rounded-md",
+                        "grow",
                         "px-3",
                         "py-2",
+                        "pr-8",
+                        "rounded-md",
+                        "lg:min-w-72",
                     ]
                 ),
                 "aria-label": _("Select action to run"),

src/unfold/templates/admin/actions.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 
-<div id="changelist-actions" class="actions flex flex-row gap-3 items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %} text-white lg:flex-row lg:items-center"  x-bind:style="'width: ' + changeListWidth + 'px'">
+<div id="changelist-actions" class="actions flex flex-col gap-3 text-white sm:flex-row sm:items-center lg:items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %}"  x-bind:style="'width: ' + changeListWidth + 'px'">
     {% block actions %}
-        <div class="flex flex-col gap-2 lg:flex-row" x-data="{action: ''}">
+        <div class="flex flex-row gap-2 lg:flex-row" x-data="{action: ''}">
             {% block actions-form %}
                 {% for field in action_form %}
                     {% if field.label %}
@@ -27,7 +27,7 @@
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="flex flex-grow flex-row items-center">
+                <div class="flex flex-grow flex-col sm:flex-row sm:items-center">
                     <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
@@ -38,7 +38,7 @@
                         </span>
 
                         {% if not cl.model_admin.list_disable_select_all %}
-                            <div class="ml-auto">
+                            <div class="mt-3 sm:ml-auto sm:mt-0">
                                 <span class="question hidden">
                                     <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded-md text-white transition-colors hover:bg-white/30" title="{% translate "Click here to select the objects across all pages" %}">
                                         {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}

src/unfold/templates/admin/base.html

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

src/unfold/templates/admin/change_list.html

@@ -61,7 +61,7 @@
             {{ cl.formset.non_form_errors }}
         {% endif %}
 
-        <div class="flex flex-row gap-4 mb-4">
+        <div class="flex flex-col gap-4 mb-4 sm:flex-row">
             {% block search %}
                 {% search_form cl %}
             {% endblock %}

src/unfold/templates/admin/change_list_results.html

@@ -7,7 +7,7 @@
 {% endif %}
 
 {% if results %}
-    <div class="overflow-x-auto lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
+    <div class="-mx-1 px-1 overflow-x-auto lg:border lg:mx-0 lg:px-0 lg:rounded-md lg:shadow-sm lg:dark:border-gray-800 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
         <table id="result_list" class="block border-gray-200 border-spacing-none border-separate w-full lg:table">
             <thead>
                 <tr>

src/unfold/templates/admin/pagination.html

@@ -1,7 +1,7 @@
 {% load unfold_list i18n %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative z-20">
-    <div class="{% if not is_popup %}lg:bottom-0 lg:fixed lg:left-0 lg:right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %} x-bind:style="'width: ' + mainWidth + 'px'">
+    <div class="{% if not is_popup %}max-w-full lg:bottom-0 lg:fixed lg:left-0 lg:right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %} x-bind:style="'width: ' + mainWidth + 'px'">
         <div class="lg:backdrop-blur-sm lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:h-[71px] lg:py-2 lg:relative lg:scrollable-top lg:px-8 lg:dark:border-gray-800{% endif %}">
             <div class="flex flex-row items-center {% if not cl.model_admin.list_fullwidth %}lg:mx-auto{% endif %}" x-bind:style="'width: ' + changeListWidth + 'px'">
                 {% if pagination_required %}

src/unfold/templates/admin/submit_line.html

@@ -2,7 +2,7 @@
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative lg:mt-16 z-20">
     <div class="{% if not is_popup %}max-w-full lg:bottom-0 lg:fixed lg:left-0 lg:right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %} x-bind:style="'width: ' + mainWidth + 'px'">
-        <div class="backdrop-blur-sm bg-white/80 dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:py-4 relative lg:scrollable-top lg:px-8 dark:border-gray-800{% endif %}">
+        <div class="backdrop-blur-sm bg-white/80 pb-4 dark:bg-gray-900/80 {% if not is_popup %}lg:border-t lg:py-4 relative lg:scrollable-top lg:px-8 dark:border-gray-800{% endif %}">
             <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
                 {% block submit-row %}
                     {% if show_save %}

src/unfold/templates/unfold/helpers/change_list_actions.html

@@ -2,7 +2,7 @@
 
 {% if actions_on_top %}
     {% if cl.search_fields or action_form or cl.has_filters %}
-        <div class="bottom-0 left-0 right-0 hidden bg-primary-600 group-has-[input:checked]:flex fixed gap-3 h-[71px] items-center p-3 z-50 lg:flex-row dark:bg-primary-500">
+        <div class="bottom-0 left-0 right-0 hidden bg-primary-600 group-has-[input:checked]:flex fixed gap-3 lg:h-[71px] items-center p-3 z-50 lg:flex-row dark:bg-primary-500">
             <div class="flex-grow lg:px-4" {% if not is_popup %}x-bind:class="{'xl:ml-0': !sidebarDesktopOpen, 'xl:ml-72': sidebarDesktopOpen}"{% endif %}>
                 {% if action_form %}
                     {% admin_actions %}

src/unfold/templates/unfold/layouts/base_simple.html

@@ -10,7 +10,7 @@
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="shadow flex-grow min-w-0" x-resize="mainWidth = $width">
+        <div id="main" class="flex-grow min-w-0" x-resize="mainWidth = $width">
             {% block content_before %}
                 {% include "unfold/helpers/header.html" %}
             {% endblock %}

src/unfold/templatetags/unfold_list.py

@@ -55,13 +55,15 @@
     "before:content-[attr(data-label)]",
     "before:items-center",
     "before:font-semibold",
+    "before:text-font-important-light",
     "before:mr-auto",
     "first:border-t-0",
     "lg:before:hidden",
     "lg:first:border-t",
     "lg:py-3",
     "lg:table-cell",
     "dark:border-gray-800",
+    "dark:before:text-font-important-dark",
 ]
 
 CHECKBOX_CLASSES = [
@@ -77,11 +79,13 @@
     "before:content-[attr(data-label)]",
     "before:font-semibold",
     "before:mr-auto",
+    "before:text-font-important-light",
     "lg:before:hidden",
     "lg:border-t",
     "lg:border-gray-200",
     "lg:table-cell",
     "dark:lg:border-gray-800",
+    "dark:before:text-font-important-dark",
 ]