From 28d21bf066f488526a32c91b3ab5f6735501bfc3 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Fri, 15 Dec 2023 14:45:37 +0000
Subject: [PATCH] Make styles for header buttons consistent

---
 client/scss/components/_button.scss                           | 4 ++--
 .../wagtailadmin/pages/listing/_page_header_buttons.html      | 2 +-
 .../templates/wagtailadmin/pages/page_listing_header.html     | 2 +-
 .../templates/wagtailadmin/shared/headers/slim_header.html    | 4 +++-
 wagtail/admin/widgets/button.py                               | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index a1b5a2e2ee..15bc01492e 100644
--- a/client/scss/components/_button.scss
+++ b/client/scss/components/_button.scss
@@ -325,8 +325,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: theme('spacing.6');
-  height: theme('spacing.6');
+  width: theme('spacing.7');
+  height: theme('spacing.slim-header');
   appearance: none;
   color: theme('colors.text-button-outline-default');
   padding: 0;
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
index fba289f49e..066b8884d3 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
@@ -2,7 +2,7 @@
 
 {% trans "Actions" as title %}
 <nav aria-label="{{ title }}">
-    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-10 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
+    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-8 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
         {% block content %}
             {% include "wagtailadmin/pages/listing/_dropdown_items.html" with buttons=buttons only %}
         {% endblock %}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
index 271ead0ffc..c42f291fde 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
@@ -9,7 +9,7 @@
 {% block actions %}
     {% page_permissions parent_page as parent_page_perms %}
     {% if parent_page_perms.can_add_subpage %}
-        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="w-header-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
+        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="w-header-button" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
     {% endif %}
 
     {# Page actions dropdown #}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index f2a10882a8..dbec2254f3 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -49,7 +49,9 @@
                         {% if actions or block_actions %}
                             {# Actions divider #}
                             <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
-                            {% firstof actions block_actions %}
+                            <div class="w-flex w-items-center w-ml-3">
+                                {% firstof actions block_actions %}
+                            </div>
                         {% endif %}
                     {% endblock %}
                 </div>
diff --git a/wagtail/admin/widgets/button.py b/wagtail/admin/widgets/button.py
index 4bcb5845c2..2c319fbc16 100644
--- a/wagtail/admin/widgets/button.py
+++ b/wagtail/admin/widgets/button.py
@@ -105,7 +105,7 @@ class HeaderButton(Button):
         attrs={},
         **kwargs,
     ):
-        classname = f"{classname} w-header-button w-h-slim-header w-ml-3".strip()
+        classname = f"{classname} w-header-button".strip()
         attrs = attrs.copy()
         attrs.update(
             {