fix: responsive improvements (#1252)

Author: lukasvinclav

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

@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 @custom-variant dark (&:where(.dark, .dark *));
-
 @source inline("h-3 w-3 h-[64px] w-[65px]! left-[65px] dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
 @source inline("{-,}{top,bottom,left,right}-{0..4}");
 @source inline("rounded-{t,r,b,l}-default");
@@ -314,6 +313,10 @@ table tr.selected th {
   @apply border-t border-base-200 dark:border-base-800;
 }
 
+.tabular-table tbody.has_original:first-of-type {
+  @apply border-t-0;
+}
+
 .add-row {
   @apply align-middle bg-white px-3 py-5 font-normal text-right dark:bg-base-900;
 }

src/unfold/styles.css

@@ -1,7 +1,7 @@
 {% load i18n admin_urls %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative lg:sticky lg:bottom-0 z-40">
-    <div class="backdrop-blur-xs bg-white/80 rounded-b-default pb-4 dark:bg-base-900/80 {% if not is_popup %}lg:border-t lg:border-base-200 relative lg:scrollable-top lg:px-8 lg:py-0 dark:border-base-800{% endif %}">
+    <div class="backdrop-blur-xs bg-white/80 rounded-b-default pb-4 px-4 dark:bg-base-900/80 {% if not is_popup %}lg:border-t lg:border-base-200 relative lg:scrollable-top lg:py-0 dark:border-base-800{% endif %}">
         <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse container lg:h-[64px]">
             {% block submit-row %}
                 {% if show_save %}

src/unfold/templates/admin/submit_line.html

@@ -1,7 +1,7 @@
 {% load i18n unfold %}
 
 {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-    <td class="border-t border-base-200 dark:border-base-800 lg:border-t-0 min-h-[62.5px] delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} text-left text-red-600 flex items-center before:capitalize before:font-semibold before:content-[attr(data-label)] before:mr-auto before:text-font-important-light before:pr-4 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:w-px dark:before:text-font-important-dark" data-label="{% trans "Remove" %}">
+    <td class="lg:border-t border-base-200 dark:border-base-800 lg:border-t-0 min-h-[62.5px] delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} text-left text-red-600 flex items-center before:capitalize before:font-semibold before:content-[attr(data-label)] before:mr-auto before:text-font-important-light before:pr-4 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:w-px dark:before:text-font-important-dark" data-label="{% trans "Remove" %}">
         {% if inline_admin_form.original %}
             <div class="flex flex-row lg:mt-3">
                 <div class="ml-auto">

src/unfold/templates/unfold/helpers/edit_inline/tabular_delete.html

@@ -15,7 +15,7 @@
         {% for line in fieldset %}
             {% for field in line %}
                 {% if field.is_readonly or not field.field.is_hidden %}
-                    <td{% if field.field.name %} class="min-h-[62.5px] field-{{ field.field.name }} group field-tabular {% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} flex items-center before:capitalize before:font-semibold before:content-[attr(data-label)] before:mr-auto before:font-text before:pr-4 lg:before:hidden font-normal px-3 lg:first:pl-3 lg:last:pr-3 lg:px-1.5 text-left lg:table-cell {% if field.field.is_hidden %} hidden!{% endif %} {% if inline_admin_formset.opts.ordering_field and field.field.name == inline_admin_formset.opts.ordering_field and inline_admin_formset.opts.hide_ordering_field %}hidden!{% endif %}"{% endif %} data-label="{{ field.field.label }}">
+                    <td{% if field.field.name %} class="min-h-[62.5px] border-b max-md:border-b border-base-200 dark:border-base-800 field-{{ field.field.name }} group field-tabular {% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} flex items-center before:capitalize before:font-semibold before:content-[attr(data-label)] before:text-font-important-light dark:before:text-font-important-dark before:mr-auto before:font-text before:pr-4 lg:before:hidden font-normal px-3 lg:first:pl-3 lg:last:pr-3 lg:px-1.5 text-left lg:table-cell {% if field.field.is_hidden %} hidden!{% endif %} {% if inline_admin_formset.opts.ordering_field and field.field.name == inline_admin_formset.opts.ordering_field and inline_admin_formset.opts.hide_ordering_field %}hidden!{% endif %}"{% endif %} data-label="{{ field.field.label }}">
                         {% include "unfold/helpers/edit_inline/tabular_field.html" %}
                     </td>
                 {% endif %}

src/unfold/templates/unfold/helpers/edit_inline/tabular_row.html

@@ -1,5 +1,5 @@
 {% if actions_list or actions_detail or actions_items or nav_global %}
-    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 shadow-xs md:flex-row md:mb-2 md:mt-0 max-md:w-full">
+    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-2 md:mt-0 max-md:w-full">
         {% if actions_items %}
             {{ actions_items }}
         {% endif %}

src/unfold/templates/unfold/helpers/tab_actions.html

@@ -24,7 +24,7 @@
     <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
     <div class="bg-white flex flex-none items-center leading-none self-stretch dark:bg-base-900">
-        <div class="opacity-0">
+        <div class="opacity-0 w-[0px]">
             <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
         </div>
 

src/unfold/templates/unfold/widgets/clearable_file_input.html

@@ -17,7 +17,7 @@
         <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
         <div class="flex flex-none items-center leading-none self-stretch">
-            <div class="opacity-0">
+            <div class="opacity-0 w-[0px]">
                 <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
             </div>
 

src/unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -436,9 +436,10 @@ def action_item_classes(context: Context, action: UnfoldAction) -> str:
     classes = [
         "border",
         "border-base-200",
-        "-ml-px",
+        "max-md:-mt-px",
         "max-md:first:rounded-t-default",
         "max-md:last:rounded-b-default",
+        "md:-ml-px",
         "md:first:rounded-l-default",
         "md:last:rounded-r-default",
     ]