fix tab actions spilling over the container in Payments

Author: mmaciekk

src/hope/apps/administration/static/admin/css/hope_admin.css

@@ -1,3 +1,4 @@
+
 #result_list thead th,
 #result_list thead th a,
 #result_list thead th div.text,

src/hope/apps/administration/templates/admin/base.html

@@ -9,8 +9,8 @@
 {% block header %}
     {{ block.super }}
     <div class="px-4">
-        <div class="container mx-auto text-sm text-font-subtle-light dark:text-font-subtle-dark py-2 flex items-center justify-between">
-            <div>
+        <div class="container mx-auto text-sm text-font-subtle-light dark:text-font-subtle-dark py-2 flex flex-wrap items-center gap-2">
+            <div class="whitespace-nowrap">
                 {% block breadcrumbs %}
                     <a href="{% url 'admin:index' %}" class="hover:text-primary-600">{% translate 'Home' %}</a>
                     {% if opts %}
@@ -21,7 +21,7 @@
                     {% endif %}
                 {% endblock breadcrumbs %}
             </div>
-            <div class="flex items-center gap-2">
+            <div class="ml-auto min-w-0 overflow-x-auto">
                 {% block breadcrumb_actions %}
                     {% action_list %}
                 {% endblock %}

src/hope/apps/administration/templates/unfold/helpers/tab_actions.html

@@ -0,0 +1,29 @@
+{% load unfold %}
+
+{% if actions_list or actions_detail or actions_items or nav_global %}
+    <div class="flex flex-row items-center ml-auto" x-data="{ showActions: false }" x-on:click.outside="showActions = false">
+        {% component "unfold/components/button.html" with href="#" variant="default" class="!px-0 w-[38px] lg:hidden" extra_attrs="x-on:click='showActions = !showActions'" %}
+            <span class="material-symbols-outlined">more_horiz</span>
+        {% endcomponent %}
+
+        <ul class="bg-white hidden flex-col font-medium left-0 right-0 lg:flex lg:flex-row lg:mb-0 lg:mt-0 max-lg:absolute max-lg:top-16 max-lg:container max-lg:mx-auto dark:bg-base-900" x-bind:class="{'max-lg:flex': showActions}">
+            {% if not actions_list_hide_default and not actions_detail_hide_default %}
+                {% if actions_items %}
+                    {{ actions_items }}
+                {% endif %}
+
+                {% if nav_global %}
+                    {{ nav_global }}
+                {% endif %}
+            {% endif %}
+
+            {% for action in actions_list %}
+                {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
+            {% endfor %}
+
+            {% for action in actions_detail %}
+                {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
+            {% endfor %}
+        </ul>
+    </div>
+{% endif %}