Partially revert listing styles changes in b8dd7f4, 08ee15a, and bb12877

In bb12877, the change of .title-wrapper from inline to inline-flex
caused an issue with Safari, which b8dd7f4 tried to fix.

Then, further cleanup in 08ee15a caused an issue to the title cell.
While we intended the styles to vertically align the title cells, this
wasn't a good idea for a few reasons:

- The styles get applied to both td and th elements
- Even if we limit this to td.title, setting display: flex directly on
  the td element is bad, as it would cause the table layout to break in
  some cases (e.g. if two td.title elements are adjacent). This issue
  technically also existed in the old `--inline-actions` styles before
  08ee15a, but it was pretty isolated as only `HistoryView` used it.

bb12877 was the commit that started it all. The styling changes in there
was to ensure the user avatar and the user name is vertically aligned.
However, since the changes in that commit caused a chain reaction to
this point, I'll try a different approach instead. Using inline-flex
instead of flex for the user avatar + name wrapper seems to do the
trick.

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)
@@ -23,6 +24,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>