Partially revert listing styles changes to fix layout issues (#11936)

CHANGELOG.txt

@@ -11,6 +11,7 @@ Changelog
  * Fix: Enable `richtext` template tag to convert lazy translation values (Benjamin Bach)
  * Fix: Ensure permission labels on group permissions page are translated where available (Matt Westcott)
  * Fix: Preserve whitespace in comment replies (Elhussein Almasri)
+ * Fix: Address layout issues in the title cell of universal listings (Sage Abdullah)
  * Docs: Remove duplicate section on frontend caching proxies from performance page (Jake Howard)
  * Docs: Document `restriction_type` field on PageViewRestriction (Shlomo Markowitz)
  * Docs: Document Wagtail's bug bounty policy (Jake Howard)
@@ -24,6 +25,7 @@ Changelog
 
  * Fix: Fix form action URL in user edit and delete views for custom user models (Sage Abdullah)
  * Fix: Fix snippet copy view not prefilling form data (Sage Abdullah)
+ * Fix: Address layout issues in the title cell of universal listings (Sage Abdullah)
 
 
 6.1 (01.05.2024)

client/scss/components/_listing.scss

@@ -223,19 +223,13 @@ ul.listing {
 
   .title {
     word-break: break-word;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: theme('spacing.2');
 
     .title-wrapper,
     h2 {
       @apply w-label-1;
-      display: inline-flex;
-      gap: theme('spacing.2');
+      display: inline;
       margin: 0;
       vertical-align: middle;
-      align-items: center;
 
       a {
         color: inherit;
@@ -247,6 +241,11 @@ ul.listing {
         }
       }
     }
+
+    .icon-folder {
+      margin: 3px 0.3em 0 0;
+      vertical-align: top;
+    }
   }
 
   .actions {

docs/releases/6.1.1.md

@@ -15,3 +15,4 @@ depth: 1
 
  * Fix form action URL in user edit and delete views for custom user models (Sage Abdullah)
  * Fix snippet copy view not prefilling form data (Sage Abdullah)
+ * Address layout issues in the title cell of universal listings (Sage Abdullah)

docs/releases/6.2.md

@@ -24,6 +24,7 @@ depth: 1
  * Enable `richtext` template tag to convert lazy translation values (Benjamin Bach)
  * Ensure permission labels on group permissions page are translated where available (Matt Westcott)
  * Preserve whitespace in comment replies (Elhussein Almasri)
+ * Address layout issues in the title cell of universal listings (Sage Abdullah)
 
 
 ### Documentation

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' %}" class="w-flex w-items-center">{% icon name="site" classname="initial" %}</a>
+            <a href="{% url 'wagtailsites:index' %}" title="{% trans 'Sites menu' %}">{% 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" class="w-flex w-items-center w-gap-2">
+        <span id="page_{{ page.pk|unlocalize|admin_urlquote }}_title">
             {% if not page.is_site_root and not page.is_leaf %}{% icon name="folder" classname="initial" %}{% endif %}
             {{ page.get_admin_display_title }}
         </span>

wagtail/users/templates/wagtailusers/users/user_cell.html

@@ -2,7 +2,7 @@
 {% load wagtailadmin_tags %}
 
 {% block title %}
-    <div class="w-flex w-items-center">
+    <div class="w-inline-flex w-items-center">
         {% avatar user=instance size="small" classname="w-shrink-0" %}
         {{ block.super }}
     </div>