From b8dd7f484f428e8027dc6993b113084dfa539986 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Fri, 19 Apr 2024 06:44:41 +0700
Subject: [PATCH] Fix icon alignment in page listings

---
 client/scss/components/_listing.scss                   |  6 +-----
 .../pages/listing/_page_title_explore.html             |  4 ++--
 wagtail/admin/tests/pages/test_explorer_view.py        | 10 ++++++----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index 1d1983e3c61..7323657ab86 100644
--- a/client/scss/components/_listing.scss
+++ b/client/scss/components/_listing.scss
@@ -231,6 +231,7 @@ ul.listing {
       gap: theme('spacing.2');
       margin: 0;
       vertical-align: middle;
+      align-items: center;
 
       a {
         color: inherit;
@@ -242,11 +243,6 @@ ul.listing {
         }
       }
     }
-
-    .icon-folder {
-      margin: 3px 0.3em 0 0;
-      vertical-align: top;
-    }
   }
 
   .actions {
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html
index 755abd85392..5173c638ec6 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html
@@ -5,7 +5,7 @@
 <div class="title-wrapper">
     {% if page.is_site_root %}
         {% if perms.wagtailcore.add_site or perms.wagtailcore.change_site or perms.wagtailcore.delete_site %}
-            <a href="{% url 'wagtailsites:index' %}" title="{% trans 'Sites menu' %}">{% icon name="site" classname="initial" %}</a>
+            <a href="{% url 'wagtailsites:index' %}" title="{% trans 'Sites menu' %}" class="w-flex w-items-center">{% icon name="site" classname="initial" %}</a>
         {% endif %}
     {% endif %}
 
@@ -17,7 +17,7 @@
         without also reading out the buttons and indicators.
     {% endcomment %}
     {% fragment as page_title %}
-        <span id="page_{{ page.pk|unlocalize|admin_urlquote }}_title">
+        <span id="page_{{ page.pk|unlocalize|admin_urlquote }}_title" class="w-flex w-items-center w-gap-2">
             {% if not page.is_site_root and not page.is_leaf %}{% icon name="folder" classname="initial" %}{% endif %}
             {{ page.get_admin_display_title }}
         </span>
diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
index 1c8689439a6..b4a1c322aba 100644
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -133,13 +133,15 @@ def test_explore_root(self):
     def test_explore_root_shows_icon(self):
         response = self.client.get(reverse("wagtailadmin_explore_root"))
         self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
 
         # Administrator (or user with add_site permission) should see the
         # sites link with its icon
-        self.assertContains(
-            response,
-            '<a href="/admin/sites/" title="Sites menu"><svg',
-        )
+        url = reverse("wagtailsites:index")
+        link = soup.select_one(f'td a[href="{url}"]')
+        self.assertIsNotNone(link)
+        icon = link.select_one("svg use[href='#icon-site']")
+        self.assertIsNotNone(icon)
 
     def test_ordering(self):
         response = self.client.get(