Fix spacing and wrapping of buttons on pages and snippets

contentrepo/static/css/contentrepo.css

@@ -88,4 +88,40 @@ pre {
 }
 * {
   box-sizing: border-box;
-}
+}
+
+/* Wagtail admin header actions: keep consistent spacing next to search */
+.w-header--hasform .right {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.w-header--hasform .right > .actionbutton,
+.w-header--hasform .right > .dropdown {
+  margin: 0;
+}
+
+.w-header--hasform .right.is-wrapped {
+  justify-content: flex-end;
+  margin-top: 0.75rem;
+}
+
+/* ModelAdmin override uses header-right as the action wrapper */
+.w-header--hasform .header-right {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+/* When the header wraps, make actions flow as a tidy full-width row */
+@media (max-width: 1200px) {
+  .w-header--hasform .right {
+    justify-content: flex-end;
+    width: 100%;
+  }
+}

home/templates/modeladmin/index.html

@@ -3,7 +3,7 @@
 
 
 {% block header_extra %}
-    <div class="right header-right">
+    <div class="header-right">
         {% if view.list_export or user_can_create %}
             <div class="actionbutton">
                 {% if user_can_create %}

home/templates/wagtailadmin/base.html

@@ -4,6 +4,30 @@
 {% get_settings %}
 {% block furniture %}
     <link rel="stylesheet" type="text/css" href="{% static 'css/contentrepo.css' %}">
+    <script>
+        (function () {
+            function updateHeaderWrapState() {
+                document
+                    .querySelectorAll(".w-header--hasform .row")
+                    .forEach(function (row) {
+                        var left = row.querySelector(".left");
+                        var right = row.querySelector(".right");
+                        if (!left || !right) {
+                            return;
+                        }
+                        var isWrapped = right.offsetTop >= left.offsetTop + left.offsetHeight - 4;
+                        right.classList.toggle("is-wrapped", isWrapped);
+                    });
+            }
+
+            function scheduleUpdate() {
+                window.requestAnimationFrame(updateHeaderWrapState);
+            }
+
+            document.addEventListener("DOMContentLoaded", scheduleUpdate);
+            window.addEventListener("resize", scheduleUpdate);
+        })();
+    </script>
     <template data-wagtail-sidebar-branding-logo>{% block branding_logo %}
       {% if settings.home.SiteSettings.favicon %}
         <img src={{settings.home.SiteSettings.favicon.url }} alt={{settings.home.SiteSettings.title}} width="80" />

home/templates/wagtailsnippets/snippets/index.html

@@ -11,13 +11,8 @@
         {% if view.list_export %}
             {% include view.export_buttons_template_name %}
         {% endif %}
-	{# begin customisation #}
-        {% if view.list_export or user_can_create %}
-            <div class="actionbutton">
-                {% if user_can_create %}
-                    {% include 'wagtailsnippets/snippets/includes/button.html' with button=view.button_helper.add_button %}
-                {% endif %}
-            </div>
+        {# begin customisation #}
+        {% if view.list_export or can_add_snippet %}
             {% block import_button %}
                 <div class="actionbutton">
                         <div class="dropdown dropdown-button match-width col">
@@ -26,9 +21,8 @@
 
                 </div>
             {% endblock %}
-
         {% endif %}
-	{# end customisation #}
+        {# end customisation #}
     {% endfragment %}
 
     {% include 'wagtailadmin/shared/header.html' with title=model_opts.verbose_name_plural|capfirst icon=header_icon search_url=search_url base_actions=base_action_locale action_url=action_url_add_snippet action_icon="plus" action_text=action_text_snippet extra_actions=extra_actions search_results_url=index_results_url %}