fix: delete link in stacked and tabular inlines

unfoldadmin · Jan 10, 2023 · fb3f31c · fb3f31c
1 parent 9f8002a
commit fb3f31c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/admin/edit_inline/tabular.html b/src/unfold/templates/admin/edit_inline/tabular.html
@@ -133,13 +133,13 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                         {% endfor %}
 
                                         {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-                                            <td class="
-                                                delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} align-middle text-left font-normal px-3 text-sm text-red-600
-                                                border-b flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:table-cell lg:underline lg:w-px dark:border-gray-800
-                                                "
-                                                data-label="{% trans "Remove" %}">
+                                            <td class="delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} text-left font-normal px-3 text-sm text-red-600 border-b flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:underline lg:w-px dark:border-gray-800" data-label="{% trans "Remove" %}">
                                                 {% if inline_admin_form.original %}
-                                                    {{ inline_admin_form.deletion_field.field }}
+                                                    <div class="flex flex-row lg:mt-3">
+                                                        <div class="ml-auto">
+                                                            {{ inline_admin_form.deletion_field.field }}
+                                                        </div>
+                                                    </div>
                                                 {% endif %}
                                             </td>
                                         {% endif %}

diff --git a/styles.css b/styles.css
@@ -273,8 +273,12 @@ h3 .delete label {
   @apply text-gray-500;
 }
 
-h3 .inline-deletelink {
-  @apply leading-none text-red-600 text-sm underline;
+.inline-deletelink {
+  @apply block leading-none text-red-600 text-sm underline dark:text-red-500;
+}
+
+td .inline-deletelink {
+  @apply block lg:mt-2.5;
 }
 
 h3 span:nth-child(3) {